css 寫正方形並旋轉

本文轉載自查看原文 2017-11-21 14:33 1688

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

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 CSS 實現一個自適應的正方形 119.css如何使圖片固定為正方形 css來控制img正方形自適應打印空心正方形 css 長方形或正方形照片顯示為圓形頭像 Latex 箭頭、下標、符號上下寫文字、正方形和三角形移動端布局：寫一個自適應的正方形盒子【原創】美麗的字符正方形FINAL HTML5之Canvas畫正方形 1-4-18:點和正方形的關系

css 寫正方形 並旋轉

css 寫正方形 並旋轉

免責聲明！

css 寫正方形並旋轉

css 寫正方形並旋轉