純CSS實現3D正方體動畫效果

時間 2020-10-15

標籤 css html 架構 app 優化動畫 spa 3d code orm 欄目 CSS 简体版

原文原文鏈接

前言

純CSS實現3D正方體動畫效果，此方法是經過transform的旋轉（rotate）和位移（translate）實現的，具體效果是鼠標滑過期正方體的一個面會產生位移css

效果圖html

正文

1.基本架構

先在body裏添加div做爲參考，再在這個div裏添加六個div，分別表明正方體的六個面架構

<div class="cube">
    <div class="cube-3D">
        <div class="front">前</div>
        <div class="rear">後</div>
        <div class="left">左</div>
        <div class="right">右</div>
        <div class="top">上</div>
        <div class="foot" >下</div>
    </div>
</div>

2.書寫每一個div樣式

.cube {
        height: 300px;
        width: 240px;
        text-align: center;
        float: left;
    }


.cube-3D {
        width: 41px;
        height: 41px;
        margin: auto;
        margin-top: 50px;
        text-align: center;
        transform: rotateX(45deg) rotateY(-45deg);
        transform-style: preserve-3d;
        font-size: 0;
        }


.cube-3D div {
        width: 41px;
        height: 41px;
        position: absolute;
        left: 0;
        top: 0;
        /* opacity: 0.5; */
        background-color: white;
        border: 0.5px solid #82C14C;
        transition: 0.6s;
            }


.front {transform: translateZ(21px);}


.rear {transform: translateZ(-21px);}


.left {transform: translateX(-21px) rotateY(-90deg);}


.right {transform: translateX(21px) rotateY(-90deg);}


.top {transform: translateY(-21px) rotateX(90deg);}


.foot {transform: translatey(21px) rotateX(-90deg);}

效果：app

能夠先將cube-3D下的div設置透明度，方便觀察優化

其中核心的代碼時cube-3D裏的 transform-style: preserve-3d;動畫

3.爲須要產生動畫的一面單獨設置樣式

<div class="cube">
    <div class="cube-3D">
        <div class="front">前</div>
        <div class="rear">後</div>
        <div class="left">左</div>
        <div class="right">右</div>
        <div class="top">上</div>
        <div class="foot foot-hover" >下</div>
    </div>
</div>

在foot（正方體的底面）添加一個類（foot-hover），單獨設置這個面的樣式spa

.foot-hover,
{
    background-color: #8BC65A !important;
    opacity: 0.8;
}

效果：3d

4.設置鼠標hover效果

咱們要的效果就是鼠標移上去底面往下移動一段距離，那麼在hover時只需設置translateY的值便可code

代碼：orm

.cube:hover .foot-hover {
    transform: translateY(40px) rotatex(-90deg);
                 }

效果：

這時咱們會發現，正方體底部會出現鏤空的效果，不太好看，咱們想要的是下圖的這種效果，其實實現很簡單

5.優化

其實實現上圖那種效果並非很麻煩，只須要再複製一個底部div就行，再改一下顏色便可

代碼以下：

<div class="cube">
    <div class="cube-3D">
        <div class="front">前</div>
        <div class="rear">後</div>
        <div class="left">左</div>
        <div class="right">右</div>
        <div class="top">上</div>
        <div class="foot" style="background-color: #E4F0DA;">下</div>
        <div class="foot foot-hover" >下</div>
    </div>
</div>

因爲行內樣式優先級高於外部樣式，因此行內樣式會覆蓋外部樣式的背景顏色。

再將div爲cube的盒子再複製四個，改一下cube的rotateX和rotateY的值便可，完整代碼以下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>3D</title>
        <style type="text/css">
            /* 研究開始 */
            .yan-Jiu {
                height: 510px;
                width: 100%;
                margin-top: 100px;
                background-color: #eee;
            }

            .yan-Jiu-center {
                width: 1200px;
                margin: auto;
                height: 420px;
                color: #6B6B6B;
            }

            .cube-3D {
                width: 41px;
                height: 41px;
                margin: auto;
                margin-top: 50px;
                text-align: center;
                transform: rotateX(45deg) rotateY(-45deg);
                transform-style: preserve-3d;
                font-size: 0;
            }

            .cube-3D div {
                width: 41px;
                height: 41px;
                position: absolute;
                left: 0;
                top: 0;
                /* opacity: 0.5; */
                background-color: white;
                border: 0.5px solid #82C14C;
                transition: 0.6s;
            }

            .front {
                transform: translateZ(21px);
            }

            .rear {
                transform: translateZ(-21px);
            }

            .left {
                transform: translateX(-21px) rotateY(-90deg);
            }

            .right {
                transform: translateX(21px) rotateY(-90deg);
            }


            .top {
                transform: translateY(-21px) rotateX(90deg);
            }

            .foot {
                transform: translatey(21px) rotateX(-90deg);
            }


            .cube {
                height: 300px;
                width: 240px;
                text-align: center;
                float: left;

            }



            .foot-hover,
            .right-hover,
            .top-hover,
            .front-hover {
                background-color: #8BC65A !important;
                opacity: 0.8;
            }

            .yan-Jiu:hover .foot-hover {
                transform: translateY(40px) rotatex(-90deg);

            }

            .yan-Jiu:hover .right-hover {
                transform: translateX(40px) rotateY(-90deg);
            }


            .yan-Jiu:hover .top-hover {
                transform: translateY(-40px) rotateX(90deg);

            }

            .yan-Jiu:hover .front-hover {
                transform: translatez(40px);

            }

            .yj-3d-3 {
                transform: rotateX(-45deg) rotateY(-45deg);
            }
        </style>
    </head>
    <body>


        <div class="yan-Jiu w">
            <div class="yan-Jiu-body ban">
                <div class="yan-Jiu-center">
                    <div class="cube">
                        <div class="cube-3D">
                            <div class="front">前</div>
                            <div class="rear">後</div>
                            <div class="left">左</div>
                            <div class="right">右</div>
                            <div class="top">上</div>
                            <div class="foot " style="background-color: #E4F0DA;">下</div>
                            <div class="foot foot-hover">下</div>
                        </div>
                    </div>


                    <div class="cube ">
                        <div class="cube-3D ">
                            <div class="front">前</div>
                            <div class="rear">後</div>
                            <div class="left">左</div>
                            <div class="right right-hover">右</div>
                            <div class="right " style="background-color: #E4F0DA;">下</div>
                            <div class="top">上</div>
                            <div class="foot">下</div>
                        </div>
                    </div>



                    <div class="cube">
                        <div class="cube-3D  yj-3d-3">
                            <div class="front">前</div>
                            <div class="rear">後</div>
                            <div class="left">左</div>
                            <div class="right right-hover">右</div>
                            <div class="right" style="background-color: #E4F0DA;">下</div>
                            <div class="top">上</div>
                            <div class="foot">下</div>
                        </div>
                    </div>




                    <div class="cube">
                        <div class="cube-3D yj-3d-3">
                            <div class="front">前</div>
                            <div class="rear">後</div>
                            <div class="left">左</div>
                            <div class="right">右</div>
                            <div class="top " style="background-color: #E4F0DA;">下</div>
                            <div class="top top-hover">上</div>
                            <div class="foot">下</div>
                        </div>
                    </div>





                    <div class="cube">
                        <div class="cube-3D">
                            <div class="front " style="background-color: #E4F0DA;">下</div>
                            <div class="front front-hover">前</div>
                            <div class="rear">後</div>
                            <div class="left">左</div>
                            <div class="right">右</div>
                            <div class="top">上</div>
                            <div class="foot">下</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>