前端实战小案例--旋转的立方体_前端圆柱体转动-优快云博客

转自：https://blog.youkuaiyun.com/qq_16687863/article/details/100298417

前端实战小案例–旋转的立方体

知识点：CSS3 transform变形（3D转换）对应地三维坐标

参考blog: https://www.cnblogs.com/gg-qq/p/10255949.html

效果图

代码

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>旋转的立方体</title>
    <style type="text/css">
      html,body{
        margin:0;
        padding:0;
      }
      .container,
      .container .outer,
      .container .inner,
      .container .inner div{
        width: 16rem;
        height: 16rem;
        font-size: 1.8rem;
        text-align: center;
        line-height: 16rem;
        /* background-color: blue; */
      }
      .container{
        margin: 0 auto;
        transform-style: preserve-3d;
        animation: roate_y 4s linear infinite;
      }
      @keyframes roate_y {
        from{transform: rotateY(0);}
        to{transform: rotateY(360deg);}
      }
      .container .outer{
			  transform-style: preserve-3d;
			  transform: rotateX(55deg);
		  }
      .container .inner{
			  transform-style: preserve-3d;
			  transform: rotateY(50deg);
			  position: relative;
		  }
      .container .inner div{
			  transform-style: preserve-3d;
			  position: absolute;
		 }

      .container .plane-1{
        /* 右 */
        background: rgba(127,127,255,0.3);
        right: -8rem;
        transform: rotateY(90deg);
      }
      .container .plane-2{
        /* 左 */
			  background: rgba(127,255,255,0.3);
			  left: -8rem;
			  transform: rotateY(90deg);
		  }
		  .container .plane-3{
        /* 后 */
			  background: rgba(127,255,255,0.3);
			  transform: translateZ(-8rem);
		  }
		  .container .plane-4{
        /* 前 */
			  background: rgba(0,255,255,0.3);
			  transform: translateZ(8rem);
		  }
		  .container .plane-5{
        /* 上 */
			  background: rgba(0,225,127,0.3);
			  transform: rotateX(-90deg);
			  bottom: -8rem;
		  }
		  .container .plane-6{
        /* 下 */
			  background: rgba(127,127,127,0.3);
		  	transform: rotateX(-90deg);
			  top: -8rem;
		  }
    </style>
  </head>
  <body>
    <br><br><br><br><br>
    <div class="container">
      <div class="outer">
        <div class="inner">
          <div class="plane-1">右</div>
          <div class="plane-2">左</div>
          <div class="plane-3">后</div>
          <div class="plane-4">前</div>
          <div class="plane-5">上</div>
          <div class="plane-6">下</div>
        </div>
      </div>
    </div>
  </body>
</html>