CSS3畫一個滾動的骰子

今天利用CSS3來畫一個自動滾動的骰子。

思路：骰子的六個面分別用六個ul標簽，每個面的點數就是li標簽，點數的排列采用伸縮布局，然后采用定位和transform屬性將六個面翻轉折疊成立方體。

1、HTML結構：用一個類名為box的大盒子將六個面（ul）包起來，方便給整個骰子定位和添加動畫；每個ul里的li代表每個面的點數，其中第四、五、六面每一列的點數分別用一個div包起來

 <div class="box">
        <ul class="one">
            <li></li>
        </ul>
        <ul class="two">
            <li></li>
            <li></li>
        </ul>
        <ul class="three">
            <li></li>
            <li></li>
            <li></li>
        </ul>
        <ul class="gtThree four">
            <div>
                <li></li>
                <li></li>
            </div>
            <div>
                <li></li>
                <li></li>
            </div>

        </ul>
        <ul class="gtThree five">
            <div>
                <li></li>
                <li></li>
            </div>
            <div>
                <li></li>
            </div>
            <div>
                <li></li>
                <li></li>
            </div>
        </ul>
        <ul class="gtThree six">
            <div>
                <li></li>
                <li></li>
                <li></li>
            </div>
            <div>
                <li></li>
                <li></li>
                <li></li>
            </div>
        </ul>
    </div>

2、利用伸縮（彈性）布局畫出骰子六個面的點數

2.1給每個ul添加一個彈性布局，把每個li切成圓

ul {
    width: 250px;
    height: 250px;
    background-color: white;
    padding: 0;
    list-style: none;
    border-radius: 40px;
    display: flex;
}

li {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: red;
}

2.2 第一面：主軸居中，副軸居中

.one {
     justify-content: center;
     align-items: center;
4 }

2.2第二面：將主軸改為垂直方向，兩點均勻分開（space-around：兩點之間的空白部分是兩點前后各空白部分的兩倍），副軸居中

.two {
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
}

2.3第三面：將三點（水平）均勻分成三列，再分別給中間點設置副軸（垂直）居中，第三點設置位於副軸結尾

.three {
    justify-content: space-around;
}

.three li:first-child {
    margin-top: 10px;
}

.three li:nth-child(2) {
    align-self: center;
}

.three li:nth-child(3) {
    align-self: flex-end;
    margin-bottom: 10px;
}

2.4第四，五，六面：每一列均分（flex:1）排列，然后每一列再分別添加一個彈性布局，並將主軸改為垂直方向，其中的點數在主軸上均勻排列，副軸居中

.gtThree div {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
}

3、利用定位和transform屬性將每個面折疊成一個立方體：給每個ul設置一個絕對定位（定位父級是div.box），這樣每個面都疊在一起，然后分別：

第一面（后面）：不動；

第二面（右側面）：沿Y軸旋轉90度，旋轉軸是其右邊框

第三面（左側面）：沿Y軸旋轉-90度，旋轉軸是其左邊框

第四面（底面）：沿X軸旋轉-90度，旋轉軸是其下邊框

第五面（頂面）：沿X軸旋轉90度，旋轉軸是其上邊框

第六面（前面）：沿Z軸平移250個像素

注：記得給body添加視距屬性perspective（視距就是模擬一個鏡頭到元素的距離），否則看不出立體的效果

body {
    perspective: 1800px;
    background-color: black;
}
ul {
    position: absolute;
    left: 0;
    top: 0;
}
.one {
    transform: translateZ(0);
}

.two {
    transform: rotateY(90deg);
    transform-origin: right;
    
}

.three {
    transform: rotateY(-90deg);
    transform-origin: left;

}

.four{
    transform: rotateX(-90deg);
    transform-origin: bottom;
}
.five{
    transform: rotateX(90deg);
    transform-origin: top;
}
.six{
    transform: translateZ(250px);
} 

 4、給骰子添加動畫，讓骰子動起來：定義一個change動畫，讓骰子自由旋轉，角度可以自己慢慢調

注：transform-style: preserve-3d; 開啟3D動畫，必須寫，否則沒有3D動畫效果

.box{
    transform-style: preserve-3d;  
    animation: change 30s linear infinite;          
}
@keyframes change {
    from{
        transform: rotateY(360deg) rotateX(720deg) rotateZ(-720deg);
    }to{
        transform:  rotateY(-360deg) rotateX(-720deg) rotateZ(720deg);
        }
}

4.1鼠標移入事件：各個面分別展開

.box:hover .one{
    transform: translateZ(-50px);
}
.box:hover .two{
    left: 50px;
}
.box:hover .three{
    left: -50px;
}
.box:hover .four{
    top: 50px;
}
.box:hover .five{
    top: -50px;
}
.box:hover .six{
    transform: translateZ(300px);
}

 

★★★附上完整CSS代碼（HTML見上方）

body {
    perspective: 1800px;
    background-color: black;
}
.box{
    width: 250px;
    height: 250px;
    position: relative;
    margin: 150px auto;
    transform-style: preserve-3d;  
    animation: change 30s linear infinite;      
    
}
.box:hover .one{
    transform: translateZ(-50px);
}
.box:hover .two{
    left: 50px;
}
.box:hover .three{
    left: -50px;
}
.box:hover .four{
    top: 50px;
}
.box:hover .five{
    top: -50px;
}
.box:hover .six{
    transform: translateZ(300px);
}
ul {
    width: 250px;
    height: 250px;
    background-color: white;
    padding: 0;
    list-style: none;
    border-radius: 40px;
    display: flex;
    position: absolute;
    /* opacity: .9; */
    transition: all 1s;
    left: 0;
    top: 0;
    border: 1px solid black;    
}

li {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: red;
}

.one {
    justify-content: center;
    align-items: center;
    transform: translateZ(0);
}

.two {
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    
    transform: rotateY(90deg);
    transform-origin: right;
    
}

.three {
    justify-content: space-around;

    transform: rotateY(-90deg);
    transform-origin: left;

}

.three li:first-child {
    margin-top: 10px;
}

.three li:nth-child(2) {
    align-self: center;
}

.three li:nth-child(3) {
    align-self: flex-end;
    margin-bottom: 10px;
}

.four{
    transform: rotateX(-90deg);
    transform-origin: bottom;
}
.five{
    transform: rotateX(90deg);
    transform-origin: top;
}
.six{
    transform: translateZ(250px);
} 
.gtThree div {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
}

@keyframes change {
    from{
        transform: rotateY(360deg) rotateX(720deg) rotateZ(-720deg);
    }to{
        transform:  rotateY(-360deg) rotateX(-720deg) rotateZ(720deg);
        }
}