css3 翻转和旋转的区别

html-css010

css3 翻转和旋转的区别,第1张

css3中的transform中有旋转，放缩，倾斜，平移的功能，分别对应的属性是：rotate，scale，skew，translate

旋转：（rotate）

[css] view plain copy

-webkit-transform:rotate(10deg)

-moz-transform:rotate(10deg)

transform:rotate(10deg)

翻转：（scale）

(这个属性是放缩的功能，怎么能翻转的！原来括弧里面（1，1）前者表示X轴，后者表示Y轴，当数字大于1时放大，大于0并小于1时缩小，负数代表翻转)

水平翻转：

[css] view plain copy

-webkit-transform:scale(-1，1)

-moz-transform:scale(-1，1)

transform:scale(-1，1)

垂直翻转：

[css] view plain copy

-webkit-transform:scale(1，-1)

-moz-transform:scale(1，-1)

transform:scale(1，-1)

/* css3 让一个图片不断翻转示例代码 */

#gavinPlay{

/* background:color url x y repeat 图片来自百度图片，按需要更换 */

background:red url("https://ss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=2406548182,3889596045&fm=80") center no-repeat

/* background-size:auto auto || cover 代表以宽或高填满元素背景 */

background-size:cover

/* 随便设置宽高值，测试 */

width:200px

height:200px

/* 设置默认样式，开启3d硬件加速 */

-webkit-transform:translate3d(0,0,0)

-moz-transform:translate3d(0,0,0)

transform:translate3d(0,0,0)

/* 设置动画，animation:动画名称 动画播放时长单位秒或微秒 动画播放的速度曲线linear为匀速 动画播放次数infinite为循环播放 */

-webkit-animation:play 3s linear infinite

-moz-animation:play 3s linear infinite

animation:play 3s linear infinite

}

@-webkit-keyframes play{

0%  {

/*

水平翻转

*/

-webkit-transform:rotateY(0deg)

/*

垂直翻转

-webkit-transform:rotateX(0deg)

顺时针旋转

-webkit-transform:rotate(0deg)

逆时针旋转

-webkit-transform:rotate(0deg)

*/

}

100% {

/* 水平翻转 */

-webkit-transform:rotateY(360deg)

/* 垂直翻转

-webkit-transform:rotateX(360deg)

顺时针旋转

-webkit-transform:rotate(360deg)

逆时针旋转

-webkit-transform:rotate(-360deg)

*/

}

}

@-moz-keyframes play{

0%  {

-moz-transform:rotateY(0deg)

/*

-moz-transform:rotateX(0deg)

-moz-transform:rotate(0deg)

-moz-transform:rotate(0deg)

*/

}

100% {

-moz-transform:rotateY(360deg)

/*

-moz-transform:rotateX(360deg)

-moz-transform:rotate(360deg)

-moz-transform:rotate(-360deg)

*/

}

}

@keyframes play{

0%  {

transform:rotateY(0deg)

/*

transform:rotateX(0deg)

transform:rotate(0deg)

transform:rotate(0deg)

*/

}

100% {

transform:rotateY(360deg)

/*

transform:rotateX(360deg)

transform:rotate(360deg)

transform:rotate(-360deg)

*/

}

} <!-- html 布局代码 -->

<div id="gavinPlay"></div>