CSS--3D正方體旋轉

本文轉載自查看原文 2020-07-24 10:50 483 正方體旋轉/ CSS3效果

前言：正方體旋轉這個效果是之前在逛其他博客的時候看到的，然后覺得好玩，就做出來看看。

代碼：

  1 <!DOCTYPE html>
  2 <head> 
  3     <meta charset="utf-8" /> 
  4     <title>正方體旋轉</title>
  5     <meta name="viewport" content="width=device-width, initial-scale=1" />
  6 </head>
  7 <style>
  8     body{
  9         margin: 0 0;
 10         padding:0 0;
 11     }
 12     #cube img{
 13         width: 100%;
 14         display: block;
 15     }
 16     #cube{
 17         transform-style: preserve-3d;/*構建3D立體圖形必須設置preserve-3d*/
 18         /* perspective: 1000px;  */
 19         /*Z軸視角*/
 20         /* perspective-origin: 400px 0px; */
 21         /*可設置X\Y方向的視角，Z方向由perspective()決定。*/
 22         width: 200px;
 23         height: 200px;
 24         margin: 150px auto;
 25         animation: rotate3D 10s infinite;
 26         animation-delay: 0s;
 27         animation-timing-function: linear;
 28     }
 29 @keyframes rotate3D{
 30     from{
 31         transform: rotateX(0deg) rotateY(0deg);
 32     }
 33     to{
 34         transform: rotateX(360deg) rotateY(360deg);
 35         }
 36 }
 37     #cube div{
 38         /* transform-origin:left top; */
 39         opacity:0.7;
 40         position: absolute;
 41         transition: all  .4s;
 42     }
 43     .out_back{
 44         transform: translateZ(-100px);
 45     }
 46     .out_left{
 47         transform: rotateY(90deg) translateZ(100px);
 48     }
 49     .out_right{
 50         transform: rotateY(-90deg) translateZ(100px);
 51     }
 52     .out_bottom{
 53         transform:rotateX(-90deg) translateZ(100px);
 54     }
 55     .out_top{
 56         transform: rotateX(90deg) translateZ(100px);
 57     }
 58     .out_front{
 59         transform: translateZ(100px);
 60     }
 61 
 62     #cube span {
 63         transition: all  .4s;
 64         opacity:0.7;
 65         position: absolute;
 66         width: 100px;
 67         height: 100px;
 68         top: 50px;
 69         left: 50px;
 70     }
 71     .in_left {
 72     transform: rotateY(90deg) translateZ(50px);
 73     }
 74     .in_right {
 75     transform: rotateY(-90deg) translateZ(50px);
 76     }
 77     .in_bottom{
 78         transform:rotateX(-90deg) translateZ(50px);
 79     }
 80     .in_top{
 81         transform: rotateX(90deg) translateZ(50px);
 82     }
 83     .in_front{
 84         transform: translateZ(50px);
 85     }
 86     .in_back {
 87     transform: translateZ(-50px);
 88 }
 89 
 90     #cube:hover .out_front {
 91         transform: translateZ(200px);
 92     }
 93     #cube:hover .out_back {
 94         transform: translateZ(-200px);
 95     }
 96     #cube:hover .out_left {
 97         transform: rotateY(90deg) translateZ(200px);
 98     }
 99     #cube:hover .out_right {
100         transform: rotateY(-90deg) translateZ(200px);
101     }
102     #cube:hover .out_top {
103         transform: rotateX(90deg) translateZ(200px);
104     }
105     #cube:hover .out_bottom {
106         transform: rotateX(-90deg) translateZ(200px);
107     }
108     #cube:hover .in_front {
109         transform: translateZ(100px);
110     }
111     #cube:hover .in_back {
112         transform: translateZ(-100px);
113     }
114     #cube:hover .in_left {
115         transform: rotateY(90deg) translateZ(100px);
116     }
117     #cube:hover .in_right {
118         transform: rotateY(-90deg) translateZ(100px);
119     }
120     #cube:hover .in_top {
121         transform: rotateX(90deg) translateZ(100px);
122     }
123     #cube:hover .in_bottom {
124         transform: rotateX(-90deg) translateZ(100px);
125     }
126 </style>
127 
128 
129 
130 <body>
131     <div id="cube">
132         <div class="out_front">
133             <img src="https://images.cnblogs.com/cnblogs_com/71yishen/1812324/o_200723062933diShiNi-1.jpg" class="out_pic">
134         </div>
135         <div class="out_back">
136             <img src="https://images.cnblogs.com/cnblogs_com/71yishen/1812324/o_200723062933diShiNi-1.jpg" class="out_pic">
137         </div>
138         <div class="out_left">
139             <img src="https://images.cnblogs.com/cnblogs_com/71yishen/1812324/o_200723062933diShiNi-1.jpg" class="out_pic">
140         </div>
141         <div class="out_right">
142             <img src="https://images.cnblogs.com/cnblogs_com/71yishen/1812324/o_200723062933diShiNi-1.jpg" class="out_pic">
143         </div>
144         <div class="out_top">
145             <img src="https://images.cnblogs.com/cnblogs_com/71yishen/1812324/o_200723062933diShiNi-1.jpg" class="out_pic">
146         </div>
147         <div class="out_bottom">
148             <img src="https://images.cnblogs.com/cnblogs_com/71yishen/1812324/o_200723062933diShiNi-1.jpg" class="out_pic">
149         </div>
150         <span class="in_front">
151             <img src="https://images.cnblogs.com/cnblogs_com/71yishen/1812324/o_200723062933diShiNi-1.jpg" class="in_pic">
152         </span>
153         <span class="in_back">
154             <img src="https://images.cnblogs.com/cnblogs_com/71yishen/1812324/o_200723062933diShiNi-1.jpg" class="in_pic">
155         </span>
156         <span class="in_left">
157             <img src="https://images.cnblogs.com/cnblogs_com/71yishen/1812324/o_200723062933diShiNi-1.jpg" class="in_pic">
158         </span>
159         <span class="in_right">
160             <img src="https://images.cnblogs.com/cnblogs_com/71yishen/1812324/o_200723062933diShiNi-1.jpg" class="in_pic">
161         </span>
162         <span class="in_top">
163             <img src="https://images.cnblogs.com/cnblogs_com/71yishen/1812324/o_200723062933diShiNi-1.jpg" class="in_pic">
164         </span>
165         <span class="in_bottom">
166             <img src="https://images.cnblogs.com/cnblogs_com/71yishen/1812324/o_200723062933diShiNi-1.jpg" class="in_pic">
167         </span>
168     </div>
169 </body>
170 </html>

HTML

知識點：

要構建正方體，一定要了解3D坐標體系、3D變形的原理，元素是怎么翻轉的，哪邊是正向哪邊是負向，Z軸是怎么位移的等等。下面只能概述，具體的過程還是要自己想一想，不然很難了解透的。有了正方體，用animation實現旋轉方式就好了。也可以用hover改變位移實現鼠標飄上去的動作效果，這里就比較容易了。

解析：

一　　給出html，可以給六個面設置不同的背景色，這樣比較突出,設置div大小：200px

1  <div id="cube">
2         <div class="out_front"></div>
3         <div class="out_back"></div>
4         <div class="out_left"></div>
5         <div class="out_right"></div>
6         <div class="out_top"> </div>
7         <div class="out_bottom"></div>
8  </div>

#cube,#cube div{
    width:200px;
    height:200px;
}
.out_back{background-color:#FF0000;}
.out_left{background-color:#FF7D00; }
.out_right{background-color:#FFFF00;}
.out_bottom{background-color:#00FF00;}
.out_top{ background-color:#0000FF;}
.out_front{background-color:#00FFFF;}

二　　構建3D立體圖形，設置觀看點，透視

1) 首先需要設置，構建3D立體圖形構建3D立體圖形，默認參數是flat，表2D

transform-style: preserve-3d;

2) 設置perspective，是Z軸位置的顯示距離，也就是視距。視距越大，立體效果越不明顯。如果不設置perspective，Z軸上的點都會對應在X,Y軸上，所以從屏幕上就看不到透視效果，只會顯示為2D。

如： perspective:1000px ->就像是你對應屏幕內容的距離，近大遠小

3) perspective，是Z軸的視距，而perspective-origin，則代表XY軸觀看點，不同的位置能夠看到不一樣的立體圖形，X代表X軸方向的位置，Y代表Y軸方向的位置

如： perspective-origin: 600px 0px; ->就表示在x軸600px的位置觀看圖形。

上述的作用就是為了在屏幕上顯示出3D效果，且都要設置在父div上，獲得透視效果的是子元素，而不是元素本身，如上就都要寫在div#cube里面。

①就代表了子元素可以構建3D立體（配置環境）

②就代表給元素3D坐標Z軸添加視距（允許透視，有3D效果）

③就是給元素更改觀看點（更清晰的看到立體圖形）

perspective是必須寫的，沒有的話，頁面就沒有3D效果，但是perspective參數得到的是你從正面看到的一個立體的透視圖形，就像我們從正面看魔方是一樣的，立體效果並不明顯，

就像這樣perspective給元素添加了透視，顯示的就不再是一個正方形。

而通過改變觀看點，就能看到一個比較清晰的正方體。如下

x軸設置了600px的觀看點，兩側的效果就會更直白了。

上面描述的是已有正方體而得到的結果，主要是為了解釋perspective的意義。實際上我們寫到這里頁面是沒有任何效果的，這樣只是為了在后面，我們搭建左側面，右側面等能看的比較清楚。因為就算不設置perspective，通過變形位移得到的正方形還是存在的，只是但從正面你是看不到的，這樣只是為了保證變形的結果是正確的。

同樣，最后我們還是要讓元素旋轉的，前面是保證得到的元素是正確的，之后就可以把perspective-origin，和perspective樣式注釋掉了，因為通過旋轉，就能看到了正方體的各個面。

如果還保持着不同的觀看點，那么得到的旋轉圖形就不是正方形了，不同角度看到的物體是不一樣形狀，同樣看到的旋轉圖形也是。我們想要的是正方體旋轉。

那如果不需要旋轉動畫，透視效果自然還是要有的，不然看到的就是一個正方形。

三　　構建正方體，了解元素基點

前面3D環境已經構建好了

這里以左側面為例：

父元素相對定位，子元素絕對定位

 .out_left{
     transform: rotateY(-90deg) translateZ(100px);
 }

X軸旋轉-90°，即從右向左旋轉到九十度垂直

然后設置Z軸向左位移100px，translateZ(100px)。

從旋轉90則可以看到，旋轉的中心軸，是以自身中間對稱軸為准的，所以旋轉過來是一半在前邊一半在后面

這樣有兩個辦法

①可以把back面向后位移100px

.out_back{
    transform: translateZ(-100px);
}

這樣左側面就完成了,或者不改變后面，左側面再向X軸位移：translateX(100px)。都可以得到正方體的左側面，這就是開頭說的需要了解3D位移變形的原理，實現方法是多樣的。

②了解transform-origin屬性，前面perspective-origin是指觀看點,而transform-origin就是元素基點，它默認是以自身所在的中心位置為原點的。

所以剛才旋轉90°得到的圖形是一半前一半后，第二種方法就是改變元素基點。

transform-origin默認值是center center，改為如下

transform-origin:left top;

這樣正方體就會以左邊線為軸心旋轉90°，得到左側面。

其他各個側面：

.out_right{
        transform: rotateY(90deg) translateZ(100px);
}
.out_bottom{
        transform:rotateX(-90deg) translateZ(100px);
}
.out_top{
        transform: rotateX(90deg) translateZ(100px);
}
.out_front{
        transform: translateZ(100px);
}

這樣一個正方體顯示出來了，例子中是在里面又嵌套了一個小正方體，只要原理明白，寬度，高度設為大正方體的一半，3D位移時也要減一半就得到小正方體。

四　　animation動畫，實現正方體旋轉

#cube{ 
         animation: rotate3D 10s infinite;    /*動畫名稱  持續時間  無限次循環*/
         animation-delay: 0s;    /*延遲時間*/
         animation-timing-function: linear;  /*勻速播放*/
} 
@keyframes rotate3D{
    from{   /*X,Y軸旋轉360°*/
        transform: rotateX(0deg) rotateY(0deg);
    }
    to{
        transform: rotateX(360deg) rotateY(360deg);
        }
}

如果正方體不是按自身旋轉360°，那說明軸心不是正方體的中心位置，可以在父元素中設置：

transform-origin:center conter 100px；第三值是Z軸位置，設為正方體邊長的一半（改變元素基點）

或者通過正方體整體位移，也能達到改變元素基點的效果（元素基點沒有改變，只是通過位移后元素基點變成了體心）。

總結：

1.transform-style構建3D立體，perspective視距，perspective-origin觀看點

2.掌握transform變形，包括 rotate旋轉和 translate位移。

3.使用animation，@keyframes關鍵幀

免責聲明！

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

猜您在找 CSS3效果：旋轉的正方體 CSS3 3D效果實現一個可旋轉的正方體純手寫的css3正方體旋轉效果用html標簽+css寫出旋轉的正方體純CSS實現3D正方體動畫效果原生js實現正方體旋轉用CSS代碼做出一個簡單的自動旋轉正方體（css魔方原理）利用html5制作正方體，同時實現3D旋轉效果使用純css鼠標移入效果,炫酷的旋轉正方體 CSS3 實現正方體