css3动画旋转360度,CSS3动画（360度旋转、旋转放大、放大、移动）

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);

}

效果一：360°旋转

效果二：放大

效果三：旋转放大

效果四：上下左右移动

上面那个是鼠标触碰旋转

下面这个是自动旋转

CSS3自动旋转效果

.swip_center_img {

-moz-animation: rotate 2s infinite linear;

-webkit-animation: rotate 2s infinite linear;

animation: rotate 2s infinite linear;

position: fixed;

z-index: 9999;

top: 66.6%;

height: 4.3%;

width: 6.4%;

left: 30%;

}

@-moz-keyframes rotate {

0% {

-moz-transform: rotate(0deg);

transform-origin:50% 50%; }

50% {

-moz-transform: rotate(180deg);

transform-origin:50% 50%;

}

100% {

-moz-transform: rotate(360deg);

transform-origin:50% 50%;

}

}

@-webkit-keyframes rotate {

0% {

-webkit-transform: rotate(0deg);

transform-origin:50% 50%;

}

50% {

-webkit-transform: rotate(180deg);

transform-origin:50% 50%;

}

100% {

-webkit-transform: rotate(360deg);

transform-origin:50% 50%;

}

}

@keyframes rotate {

0% {

transform: rotate(0deg);

transform-origin:50% 50%;

}

50% {

-webkit-transform: rotate(180deg);

transform-origin:50% 50%;

}

100% {

transform: rotate(360deg);

transform-origin:50% 50%;

}

}

绕中心点旋转 (选择不同的角度) 要直接放在图片的标签上面

@-moz-keyframes rotate{

0%{

-moz-transform: rotate(0deg);

transform-origin:50% 50%; }

50%{

-moz-transform: rotate(180deg);

transform-origin:50% 50%;

}

100%{

-moz-transform: rotate(360deg);

transform-origin:50% 50%;

}

}