Title div{
width:120px；
height:120px；
line-height:120px；
margin: 20px；
背景色： # 5cb 85 c；
浮点：左；
font-size: 12px；
文本对齐3360中心；
color:orangered；
}
/lgdhb效果360旋转修正rotate (旋转度数) lgdhb/
. img1 {
transition : all 0.4 sease in-out；
- WebKit-transition 3360 all 0.4 sease-in-out；
- moz-transition 3360 all 0.4 sease in-out；
- o-transition 3360 all 0.4 sease-in-out；
}
. img1:hover {
变换： rotate (360 deg；
- WebKit-transform 3360 rotate (360 deg )；
- moz-transform 3360 rotate (360 deg )；
- o-transform 3360旋转(360度)；
-ms-transform3360rotate(360deg )；
}
放大和修改/lgdhb效果scale (放大值lgdhb )
. img2 {
transition : all 0.4 sease in-out；
- WebKit-transition 3360 all 0.4 sease-in-out；
- moz-transition 3360 all 0.4 sease in-out；
- o-transition 3360 all 0.4 sease-in-out；
}
. img2:hover {
变换： scale (1.2；
-网络工具包- transform : scale (1.2；
-moz-transform3360scale(1.2；
-邻变换3360 scale (1.2；
-ms-transform3360scale(1.2；
}
/lgdhb效果3 :旋转放大修正rotate (旋转度数) scale (放大值) lgdhb/
. img3 {
transition : all 0.4 sease in-out；
- WebKit-transition 3360 all 0.4 sease-in-out；
- moz-transition 3360 all 0.4 sease in-out；
- o-transition 3360 all 0.4 sease-in-out；
}
. img3:hover {
变换：旋转(360度)比例) 1.2；
- WebKit-transform 3360旋转(360 deg ) scale ) 1.2；
- moz-transform 3360旋转(360 deg ) scale ) 1.2；
- o-transform 3360旋转(360 deg ) scale ) 1.2；
-毫秒变换3360 rotate (360 deg ) scale ) 1.2；
}
/lgdhb效果4 :上下左右移动平移(x轴、y轴) lgdhb/
. img4 {
transition : all 0.4 sease in-out；
- WebKit-transition 3360 all 0.4 sease-in-out；
- moz-transition 3360 all 0.4 sease in-out；
- o-transition 3360 all 0.4 sease-in-out；
}
. img4:hover {
transform:translate(0，-10px )；
- WebKit-transform : translate (0，-10px )；
-moz-transform3360translate(0，-10px )；
-o-transform:translate(0，-10px )；
-ms-transform3360translate(0，-10px )；
)奋斗的微笑果一(360旋转效果二)放大效果三)旋转放大效果四)上下左右移动上的那个是鼠标触摸旋转
接下来是自动旋转
cs3自动旋转效果. swip_center_img {
- moz-animation 3360 rotate2sinfinitelinear；
- WebKit-animation 3360 rotate2sinfinitelinear；
animation : rotate2sinfinitelinear；
定位：固定；
z-index: 9999；
top: 66.6%；
日立： 4.3 %；
width: 6.4%；
left: 30%；
}
@-moz-key帧rotate {
0% {
-moz-transform3360rotate(0deg )；
transform-origin:50% 50%； }
50% {
- moz-transform 3360 rotate (180 deg )；
transform-origin:50% 50%；
}
百分之百{
- moz-transform 3360 rotate (360 deg )；
transform-origin:50% 50%；
}
}
@-webkit-keyframes rotate {
0% {
- WebKit-transform : rotate (0deg )；
transform-origin:50% 50%；
}
50% {
- WebKit-transform 3360 rotate (180 deg )；
transform-origin:50% 50%；
}
百分之百{
- WebKit-transform 3360 rotate (360 deg )；
transform-origin:50% 50%；
}
}
@keyframes rotate {
0% {
变换：旋转(0deg )；
transform-origin:50% 50%；
}
50% {
- WebKit-transform 3360 rotate (180 deg )；
transform-origin:50% 50%；
}
百分之百{
变换： rotate (360 deg；
transform-origin:50% 50%；
}
}
围绕中心点旋转(选择不同的角度)是直接放置在图像的标签上
@-moz-key帧rotate {
0%{
-moz-transform3360rotate(0deg )；
transform-origin:50% 50%； }
50%{
- moz-transform 3360 rotate (180 deg )；
transform-origin:50% 50%；
}
百分之百{
- moz-transform 3360 rotate (360 deg )；
transform-origin:50% 50%；
}
}