CSS旋转效果( 学习笔记 )

变形旋转

---

旋转：

• 通过旋转可以是元素沿着X，Y，Z轴旋转指定的角度( 或turn指旋转圈数 )
• rotateX( ) 元素沿着X轴旋
• rotateY( ) 元素沿着Y轴旋
• rotateZ( ) 元素沿着Z轴旋

transform: translateZ(-400px) rotateZ(0.5turn);
transform: rotateY(180deg);	/*镜像翻转-转到背面*/

• backface-visibility: 设置是否显示元素的背面

---

旋转实例（时钟动画）：

   <!-- 旋转实例-时钟 -->
   <div class="clock">
       <!-- 创建时针容器 -->
       <div class="hour-wrapper">
           <div class="hour"></div>
       </div>
       <!-- 创建分针容器 -->
       <div class="minute-wrapper">
           <div class="minute"></div>
       </div>
       <!-- 创建秒针容器 -->
       <div class="second-wrapper">
           <div class="second"></div>
       </div>
   </div>

   /* 旋转实例-时钟 */
   .clock{
       width: 400px;
       height: 400px;
       border-radius: 50%;
       margin: 0 auto;
       border: 10px solid black;
       position: relative;
   }
   .clock > div{
       position: absolute;
       top: 0;
       bottom: 0;
       left: 0;
       right: 0;
       margin: auto;
   }
   .hour-wrapper{
       width: 60%;
       height: 60%;
       animation: runclock 43200s;
   }
   .hour{
       width: 5px;
       height: 50%;
       background-color: black;
       margin: 0 auto;
   }
   .minute-wrapper{
       width: 80%;
       height: 80%;
       animation: runclock 3600s;
   }
   .minute{
       width: 3px;
       height: 50%;
       background-color: black;
       margin: 0 auto;
   }
   .second-wrapper{
       width: 95%;
       height: 95%;
       animation: runclock 60s steps(60);
   }
   .second{
       width: 2px;
       height: 50%;
       background-color: red;
       margin: 0 auto;
   }
   @keyframes runclock {
       from{
           transform: rotateZ(-360deg);
       }
   }