1 實現3D立方體

首先準備好UL以及6個Li；

代碼如下

ul {

position: absolute;
top: 50%;
left: 50%;

transform:translate(-50%,-50%) ? ? ? ?// 以上代碼主要是使ul居中而已

?

transform-style: preserve-3d; ? ? ? ? ? ?// 使子元素保留其3D視角
-webkit-perspective: 0;? ? ? ? ? ? ? ? ? ? ?//視距離，默認值為0

}

?

?

?li {

width: 200px;
height: 200px;
position: absolute;
}

此時，6個LI是重疊一起，如下

?

我們分別調整6個li的位置，從而實現立方體6個面的效果

?

?

//上下面

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)
}

?

寫完以上代碼后，立方體就已經完成了，但是此時你看到的還是跟上面的圖1一樣，那是因為我們的視角-webkit-perspective:為0，就像你坐在教室，左中右三列，如果你坐在中間一列，那么你看到講臺上的粉筆盒也只是一個正方形，而非一個立方體。想要看到立方體的效果，你可以轉換你的視角，設置ul的-webkit-perspective:為100PX或者其他像素；；；也可以把粉筆盒子旋轉或者傾斜一下 ，設置Ul的?transform: rotateX(-45deg) ?rotateY(-45deg) ,此時你應該能看到：

還可以給ul添加一個過渡效果：? transition: all 0.5s;?

ul:hover{?transform: rotateX(80deg) rotateY(-45deg);?}

至此，3D立方體我們就已經完成了。下面做3D骰子的效果。

?

2 ：實現3D骰子

首先定義好一個動畫：

@-webkit-keyframes run {
0% {
transform: rotateX(900deg) rotateY(6000deg) translateY(-400px)
}
100% {
transform: rotateX(0deg) rotateY(0deg) translateY(0px)
}
}

動畫大家自己寫，上面的動畫僅僅提供了一個旋轉下落的效果，僅作為一個思路的參考

點擊骰子的時候給UL添加一個類，注意animation里面的動畫名要跟外面ke-yframes的名對應，

.run {
? ? ?animation: run 5s ease; (動畫名 ?持續時間 速度) ?//animation總有8個參數
}

寫完動畫效果后，還要實現骰子的功能，下面是我自己的思路：

var arr = ["red", "black", "green", "purple", "pink", "blue"] // ?自己定義的LI的顏色
var arr2 = [1, 2, 3, 4, 5, 6]

定義好6個數字，每次點擊骰子的時候讓顏色arr1以及數字arr2進行隨機排序，然后重新插回LI中。

由于我們動畫結束后，每次展示的都是第一個li的數字及顏色，我們點擊時對數字隨機排序，從而實現雖然每次展示的都是第一個Li，但是第一個li的顏色以及數字都是隨機的，模擬骰子的效果

關鍵代碼如下：

var o = document.querySelector(".wrap");
var l = document.querySelectorAll(".wrap li");

?

arr.sort(function() {
return Math.random() - 0.5
})
arr2.sort(function() {
return Math.random() - 0.5
})
var that = this;
that.classList.remove("run");

for (var i = 0; i < l.length; i++) {
? ? l[i].innerHTML = arr2[i];
? ?l[i].style.backgroundColor = arr[i]
}
setTimeout(function() {

o.onclick = numClick;
}, 5100)

setTimeout(function(argument) {
that.classList.add("run");
}, 0)

}

說明：

每次點擊前先移除原有的run類名，再重新添加run類，從而實現每次點擊的動畫效果；

點擊后，讓點擊事件暫時為Null，防止用戶重復點擊，動畫結束后再恢復點擊事件（本例動畫為5000MS , 則在5100ms后讓事件恢復）

?

轉載于:https://www.cnblogs.com/zhengrunlin/p/5936469.html

總結

以上是生活随笔為你收集整理的简单CSS3代码实现立方体以及3D骰子的全部內容，希望文章能夠幫你解決所遇到的問題。

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