CSS3旋转动画(360度旋转、旋转放大、放大、移动) 用法和实例

Internet Explorer 10、Firefox、Opera 支持 transform 属性。

Internet Explorer 9 支持替代的 -ms-transform 属性(仅适用于 2D 转换)。

Safari 和 Chrome 支持替代的 -webkit-transform 属性(3D 和 2D 转换)。

Opera 只支持 2D 转换。

定义和用法

transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。

为了更好地理解 transform 属性，请查看这个演示。默认值：none

继承性：no

object.style.transform="rotate(7deg)"

语法transform: none|transform-functions;值描述测试

none定义不进行转换。测试

matrix(n,n,n,n,n,n)定义 2D 转换，使用六个值的矩阵。测试

matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)定义 3D 转换，使用 16 个值的 4x4 矩阵。

translate(x,y)定义 2D 转换。测试

translate3d(x,y,z)定义 3D 转换。

translateX(x)定义转换，只是用 X 轴的值。测试

translateY(y)定义转换，只是用 Y 轴的值。测试

translateZ(z)定义 3D 转换，只是用 Z 轴的值。

scale(x,y)定义 2D 缩放转换。测试

scale3d(x,y,z)定义 3D 缩放转换。

scaleX(x)通过设置 X 轴的值来定义缩放转换。测试

scaleY(y)通过设置 Y 轴的值来定义缩放转换。测试

scaleZ(z)通过设置 Z 轴的值来定义 3D 缩放转换。

rotate(angle)定义 2D 旋转，在参数中规定角度。测试

rotate3d(x,y,z,angle)定义 3D 旋转。

rotateX(angle)定义沿着 X 轴的 3D 旋转。测试

rotateY(angle)定义沿着 Y 轴的 3D 旋转。测试

rotateZ(angle)定义沿着 Z 轴的 3D 旋转。测试

skew(x-angle,y-angle)定义沿着 X 和 Y 轴的 2D 倾斜转换。测试

skewX(angle)定义沿着 X 轴的 2D 倾斜转换。测试

skewY(angle)定义沿着 Y 轴的 2D 倾斜转换。测试

perspective(n)为 3D 转换元素定义透视视图。测试HTML>

Title

div{

width:120px;

height:120px;

line-height:120px;

margin: 20px;

background-color: #5cb85c;

float: left;

font-size: 12px;

text-align: center;

color:orangered;

}

/*效果一：360°旋转 修改rotate(旋转度数)*/

.img1 {

transition: All 0.4s ease-in-out;

-webkit-transition: All 0.4s ease-in-out;

-moz-transition: All 0.4s ease-in-out;

-o-transition: All 0.4s ease-in-out;

}

.img1:hover {

transform: rotate(360deg);

-webkit-transform: rotate(360deg);

-moz-transform: rotate(360deg);

-o-transform: rotate(360deg);

-ms-transform: rotate(360deg);

}

/*效果二：放大 修改scale(放大的值)*/

.img2 {

transition: All 0.4s ease-in-out;

-webkit-transition: All 0.4s ease-in-out;

-moz-transition: All 0.4s ease-in-out;

-o-transition: All 0.4s ease-in-out;

}

.img2:hover {

transform: scale(1.2);

-webkit-transform: scale(1.2);

-moz-transform: scale(1.2);

-o-transform: scale(1.2);

-ms-transform: scale(1.2);

}

/*效果三：旋转放大 修改rotate(旋转度数) scale(放大值)*/

.img3 {

transition: All 0.4s ease-in-out;

-webkit-transition: All 0.4s ease-in-out;

-moz-transition: All 0.4s ease-in-out;

-o-transition: All 0.4s ease-in-out;

}

.img3:hover {

transform: rotate(360deg) scale(1.2);

-webkit-transform: rotate(360deg) scale(1.2);

-moz-transform: rotate(360deg) scale(1.2);

-o-transform: rotate(360deg) scale(1.2);

-ms-transform: rotate(360deg) scale(1.2);

}

/*效果四：上下左右移动 修改translate(x轴,y轴)*/

.img4 {

transition: All 0.4s ease-in-out;

-webkit-transition: All 0.4s ease-in-out;

-moz-transition: All 0.4s ease-in-out;

-o-transition: All 0.4s ease-in-out;

}

.img4:hover {

transform: translate(0, -10px);

-webkit-transform: translate(0, -10px);

-moz-transform: translate(0, -10px);

-o-transform: translate(0, -10px);

-ms-transform: translate(0, -10px);

}

CSS3实现图片循环旋转html>

图片循环旋转

*{margin: 0; padding: 0;}

.ta_c{text-align: center;

margin-top: 100px;}

@-webkit-keyframes rotation{

from {-webkit-transform: rotate(0deg);}

to {-webkit-transform: rotate(360deg);}

}

.Rotation{

-webkit-transform: rotate(360deg);

animation: rotation 3s linear infinite;

-moz-animation: rotation 3s linear infinite;

-webkit-animation: rotation 3s linear infinite;

-o-animation: rotation 3s linear infinite;

}

.img{border-radius: 250px;}

HTML实现图片360度循环旋转

效果图

//css代码

.header{

-webkit-animation:rotateImg 1s linear infinite;

width: 80px ;

height: 80px;

border: 1px solid #ccc;

vertical-align: middle;

}

@keyframes rotateImg {

0% {transform : rotate(0deg);}

100% {transform : rotate(360deg);}

}

@-webkit-keyframes rotateImg {

0%{-webkit-transform : rotate(0deg);}

100%{-webkit-transform : rotate(360deg);}

}

//html代码