css 写正方形 并旋转

css 写正方形 并旋转

  1 <!DOCTYPE html>
  2 <html>
  3     <head>
  4         <meta charset="UTF-8">
  5         <title></title>
  6         <style>
  7             * {
  8                 margin: 0;
  9                 padding: 0;
 10             }
 11             .stage {
 12                 position: relative;
 13                 margin: 300px 0 0 300px;
 14                 perspective: 800px;
 15                 width: 200px;
 16                 height: 200px;
 17             }
 18             .container {
 19                 width: 200px;
 20                 height: 200px;
 21                 position: absolute;
 22                 transform-style: preserve-3d;  /* 只是一个面在旋转 设置子元素保持3d旋转 */
 23                 transition: all 3s;
 24             }
 25             .face {
 26                 width: 100%;
 27                 height: 100%;
 28                 position: absolute;
 29                 left: 0;
 30                 top: 0;
 31                 text-align: center;
 32                 line-height: 200px;
 33                 font-size: 50px;
 34                 color: #fff;
 35                 border: 1px solid #ccc;
 36                 opacity: 0.3;
 37                 background: #999;
 38             }
 39             .f1 {
 40                 transform: rotateX(90deg) translateZ(100px);
 41                 background: yellow;
 42             }
 43             
 44             .f2 {
 45                 transform: translateZ(-100px);
 46                 background: green;
 47             }
 48             .f3 {
 49                 transform: rotateX(90deg) translateZ(-100px);
 50                 background: pink;
 51             }
 52             .f4 {
 53                 transform: translateZ(100px);
 54                 background: orange;
 55             }
 56             .f5 {
 57                 transform: rotateY(90deg) translateZ(100px);
 58                 background: blue;
 59             }
 60             .f6 {
 61                 transform: rotateY(90deg) translateZ(-100px);
 62                 background: darkgoldenrod;
 63             }
 64             /*  进行垂直翻转围绕的是X轴   */
 65            @keyframes spin-vertical {
 66                 from {
 67                     transform: rotateX(0);
 68                 }
 69                 to {
 70                     transform: rotateX(-360deg);
 71                 }
 72             }
 73             .stage .container {
 74                 transform-origin: 0 100px;
 75                 animation: spin-vertical 5s infinite linear;
 76             }
 77         </style>
 78     </head>
 79     <body>
 80         <button id="rot">旋转</button>
 81         <div class="stage">
 82             <div class="container" id="cont">
 83                 <div class="face f1">1</div>
 84                 <div class="face f2">2</div>
 85                 <div class="face f3">3</div>
 86                 <div class="face f4">4</div>
 87                 <div class="face f5">5</div>
 88                 <div class="face f6">6</div>
 89             </div>
 90         </div>
 91         <script>
 92             //进行水平翻转围绕的是Y轴
 93             var btn = document.getElementById('rot');
 94             var cont = document.getElementById('cont');
 95             btn.addEventListener('click', function() {
 96                 cont.style.transform = 'rotateY(180deg)';
 97             }, false);
 98         </script>
 99     </body>
100 </html>

 

思路整理：

  1.首先要注意的是包裹这个立方体的div元素，为了让它有立体效果，给它设置了CSS透视属性。

.stage {
                position: relative;
                margin: 300px 0 0 300px;
                perspective: 800px;   /*使元素以及子元素显示3D效果*/
                width: 200px;
                height: 200px;
            }

 

 2.立方体边长是200px，使用relative定位方式，这样它的那些使用绝对定位的各个面都被限制在它里面。我们使用preserve-3d属性值来让它表现出3D特征，而不是平面效果。

.container {
                width: 200px;
                height: 200px;
                position: absolute;
                transform-style: preserve-3d;  /* 只是一个面在旋转 设置子元素保持3d旋转 */
                transition: all 3s;
            }

3.各个面的显示效果和思路：

//上下面

rotateX(90deg)意为：将2个li沿着X轴旋转90度，此时垂直于上图1，构成了立方体的上下面。

translateZ(100px) ：  旋转后2个LI是在重叠在中间的，我们还需要它一个需要往上走LI边长的一半，一个下走LI边长的一半。

 

css代码：

li:nth-of-type(2) {
background: rgba(255, 10, 230, 0.5);
transform: rotateX(90deg) translateZ(100px)   
}

li:nth-of-type(3) {
background: rgba(0, 10, 230, 0.5);
transform: rotateX(90deg) translateZ(-100px)
}
//上下面结束

 

//左右面

左右面的原理跟上下面一样，只不过是沿着Y轴旋转，这样才能形成左右面
li:nth-of-type(4) {
background: rgba(25, 100, 230, 0.5);
transform: rotateY(90deg) translateZ(100px)
}

li:nth-of-type(5) {
background: rgba(0, 10, 71, 0.5);
transform: rotateY(90deg) translateZ(-100px)
}

//左右面结束

 

//前后面：前后面不用旋转，直接一个往前走边长一半，一个向后走一半即可

li:nth-of-type(1) {

background: rgba(40, 200, 100, 1);

transform: translateZ(100px)

}

li:nth-of-type(6) {
background: rgba(255, 35, 30, 0.5);
transform: translateZ(-100px)
}

 

4.旋转  (同时保持透视效果)

水平旋转rotateY

垂直旋转rotateX

 
posted @ 2017-11-21 14:33  sugerxiaoxiao  阅读(2780)  评论(0)  编辑  收藏  举报