第一步
先設置六個一樣大小的正方形并且設置絕對定位讓著六個面疊放在同一位置并給box設置為3D屬性
如圖：
html代碼

<ul class="box"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li></ul>

css代碼

.box{width: 200px;height: 200px;position:absolute;transform-style: preserve-3d;left: 0;right: 0;top: 0;bottom: 0;margin: auto;}.box li{width: 200px;height: 200px;position: absolute;left: 0;top:0;}

第二步

用偽類選擇符選中第一個面，讓它沿Z軸走-200px，設置個背景色為紅色；

用偽類選擇符選中第二個面，讓它沿著X軸走200px，并沿著Y軸旋轉90度，在改變選擇點為左邊中心，設置個背景色為黃色；

用偽類選擇符選中第三個面，讓它沿著X軸走 -200px，并沿著Y軸旋轉-90度，在改變選擇點為右邊中心，設置個背景色為灰色；

用偽類選擇符選中第四個面，讓它沿著Y軸走 200px，并沿著X軸旋轉-90度，在改變選擇點為上邊中心，設置個背景色為綠u色；

用偽類選擇符選中第五個面，讓它沿著Y軸走 -200px，并沿著X軸旋轉90度，在改變選擇點為下邊中心u，設置個背景色為藍色；

第六個面設置個背景色為粉紅色；
css代碼為

.box li:nth-child(1){transform: translateZ(-200px);background: red;}.box li:nth-child(2){transform: translateX(200px) rotateY(90deg);transform-origin: left center;background: yellow;}.box li:nth-child(3){transform: translateX(-200px) rotateY(-90deg);transform-origin: right center;background: #ccc;}.box li:nth-child(4){transform: translateY(200px) rotateX(-90deg);transform-origin: top center;background: green;}.box li:nth-child(5){transform: translateY(-200px) rotateX(90deg);transform-origin: bottom center;background: blue;}.box li:nth-child(6){background: pink;}

第三步
給正方體設置一個動畫代碼如下

@keyframes play{from{transform: rotateX(0) rotateY(0);}to{transform: rotateX(360deg) rotateY(360deg);}}

并給box加上代碼
animation: play 5s linear infinite;

就可以實現正方體
如圖：

總結

以上是生活随笔為你收集整理的css3制作正方体的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。