翻转180度
/* entire container, keeps perspective */ .flip-container { perspective: 1000; } /* flip the pane when hovered */ .flip-container:hover .flipper, .flip-container.hover .flipper { transform: rotateY(180deg); } .flip-container, .front, .back { width: 320px; height: 480px; } /* flip speed goes here */ .flipper { transition: 0.6s; transform-style: preserve-3d; position: relative; } /* hide back of pane during swap */ .front, .back { backface-visibility: hidden; position: absolute; top: 0; left: 0; }html--------- <div class="flip-container" ontouchstart="this.classList.toggle('hover');"> <div class="flipper"> <div class="front"> <!-- 前面内容 --> </div> <div class="back"> <!-- 背面内容 --> </div> </div> </div>旋转180度/*CSS3实现鼠标悬浮到图片使图片旋转180度*/ .xwcms { margin: 0 auto; -webkit-border-radius: 110px; border-radius: 110px; -webkit-transition: -webkit-transform 1s ease-out; -moz-transition: -moz-transform 1s ease-out; -o-transition: -o-transform 1s ease-out; -ms-transition: -ms-transform 1s ease-out; } .xwcms:hover { -webkit-transform: rotateZ(720deg); -moz-transform: rotateZ(720deg); -o-transform: rotateZ(720deg); -ms-transform: rotateZ(720deg); transform: rotateZ(720deg); }
<img src="${ctx!}/ls20/dafo_01.png" class="xwcms" />
转载于:https://www.cnblogs.com/sho560/p/6052408.html
相关资源：CSS3文字旋转特效