碼上歡樂
相關內容    簡體    繁體

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

本文轉載自   查看原文   2020-10-14 11:26   244 

前言

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

效果圖

​

 

正文

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

效果：

​

可以先將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），單獨設置這個面的樣式

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

效果：

​

 

4.設置鼠標hover效果

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

代碼：

.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>

總結

以上就是今天小譚要分享的內容，小譚也只是剛剛入門的萌新，代碼寫的不是很規范，在給div命名時也很隨意，如果有什么不足之處也請各位大佬手下留情，多多包涵，小譚也歡迎各位大佬指點一二，小譚不勝榮幸，感謝包容，感謝觀看，靴靴!

 


免責聲明！

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



猜您在找 CSS3 3D效果 實現一個可旋轉的正方體 利用html5制作正方體，同時實現3D旋轉效果 CSS--3D正方體旋轉 CSS3效果：旋轉的正方體 CSS3 實現正方體 css3 利用perspective實現翻頁效果和正方體 以及翻轉效果 CSS3,transform3D立體可拖拽正方體實現原理 純手寫的css3正方體旋轉效果 css3實踐之摩天輪式圖片輪播+3D正方體+3D標簽雲（perspective、transform-style、perspective-origin） CSS3 制作正方體
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM