当鼠标移到图片上面时,图片可以旋转,达到非常漂亮的动态效果。代码如下:
样式代码:
.tptx {
margin: 0 auto;
-webkit-border-radius: 110px;
border-radius: 110px;
-webkit-transition: -webkit-transform 0.2s ease-out;
-moz-transition: -moz-transform 0.2s ease-out;
-o-transition: -o-transform 0.2s ease-out;
-ms-transition: -ms-transform 0.2s ease-out;
}
.tptx:hover {
-webkit-transform: rotateZ(180deg);
-moz-transform: rotateZ(180deg);
-o-transform: rotateZ(180deg);
-ms-transform: rotateZ(180deg);
transform: rotateZ(180deg);
}
网页代码:<img src="img/XXX" class="tptx" />
注XXX为图片地址,代码中数字根据你的需求任意调整,0.2为转动时间,180为转动角度(360为一周)。
实例:业华游乐.中国