3D立體方塊旋轉圖冊


代碼可直接復制使用看效果

這個文章參考了Lazy.Cat的文章:https://www.cnblogs.com/Lazy-Cat/p/9750244.html,大家也可以去看看,他講的還是比較詳細的。

我也覺得先來效果比較吸引人啊

 這里就先記錄一些比較關鍵的知識點,方便大家理解

1.transform:transform 屬性向元素應用 2D 或 3D 轉換。該屬性允許我們對元素進行旋轉、縮放、移動或傾斜。我們使用其rotateX,rotateY,translateZ來進行轉動

2.transition:用於設置過渡屬性

 

transition: all .4s;//所有過程完成時間為.4s

 3.animation使用簡寫屬性,將動畫與 div 元素綁定

4.keyframes:從xx到xx狀態

@keyframes animationname {keyframes-selector {css-styles;}}
@keyframes 動畫名 { from{
    初始狀態
}to{
   末態
}
}

 

我們來看看其是怎么構成一個正方形的

/*外層正方形*/ 
.set .out_front {
            /*繞Y軸轉動0度,向屏幕外偏移,離觀察者近100px*/
            transform: rotateY(0deg) translateZ(100px);
        }
         .set .out_back {
             /*繞Y軸轉動0度,向屏幕內移動,離觀察者遠離100px*/
            transform: rotateY(0deg) translateZ(-100px) ;
        }

        .set .out_left {
            /*向屏幕外移動,離觀察者遠離100px,與正前方圖片重疊,再繞Y軸轉動-90度,形成左面*/
            transform: rotateY(-90deg) translateZ(100px);
        }
        /*向屏幕外移動,離觀察者遠離100px,與正前方圖片重疊,再繞Y軸轉動90度,形成右面*/
        .set .out_right {
            transform: rotateY(90deg) translateZ(100px);
        }
        /*向屏幕外移動,離觀察者遠離100px,與正前方圖片重疊,再繞X軸轉動90度,形成頂面*/
        .set .out_top {
            transform: rotateX(90deg) translateZ(100px);
        }
        /*向屏幕外移動,離觀察者遠離100px,與正前方圖片重疊,再繞X軸轉動-90度,形成底面*/
        .set .out_bottom {
            transform: rotateX(-90deg) translateZ(100px);
        }

 

如果想要看單個圖片的轉動,可以到w3school上去體驗一下,下面附上該部分鏈接

http://www.w3school.com.cn/cssref/pr_transform.asp

完整代碼
 
         
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>3D旋轉方塊畫冊</title>
    <style type="text/css">
    /*外層容器樣式*/
    .wrap{
         margin: 220px;
        position: relative;
    }
    /*立方體效果*/
    .set{
         width: 50px;
            height: 50px;
            margin: 0 auto;
        transform-style: preserve-3d;
        /*設置動畫播放樣式:動畫對象rotate 播放速度曲線從頭到尾相同 時間20s 播放次數無限次*/
            animation: rotate linear 20s infinite;
    }
    /*動畫的旋轉方式,先設定總體的*/
    /*兼容*/
    /*firefox*/
    @-moz-keyframes rotate{
        from{
            transform: rotateX(0deg) rotateY(0deg);
        }to{
            transform: rotateX(360deg) rotateY(360deg);
        }
    }
    /*sofari chrome*/
    @-webkit-keyframes rotate {                
            from {
                transform: rotateX(0deg) rotateY(0deg);
            }
            to {
                transform: rotateX(360deg) rotateY(360deg);
            }
        }
        /*opera*/
    @-o-keyframes rotate {                                
        from {
                transform: rotateX(0deg) rotateY(0deg);
            }
            to {
                transform: rotateX(360deg) rotateY(360deg);
            }
        }
     /*設置單個圖片的樣式*/   
     .set div{
         position: absolute;
         width: 200px;
         height: 200px;
         opacity: 0.8;
         /*持續時間為4s*/
         transition: all .4s;
     }
     .pic {
            width: 200px;
            height: 200px;
        }
        .set .out_front {
            /*繞Y軸轉動0度,向屏幕外偏移,離觀察者近100px*/
            transform: rotateY(0deg) translateZ(100px);
        }
         .set .out_back {
             /*繞Y軸轉動0度,向屏幕內移動,離觀察者遠離100px*/
            transform: rotateY(0deg) translateZ(-100px) ;
        }

        .set .out_left {
            /*向屏幕外移動,離觀察者遠離100px,與正前方圖片重疊,再繞Y軸轉動-90度,形成左面*/
            transform: rotateY(-90deg) translateZ(100px);
        }
        /*向屏幕外移動,離觀察者遠離100px,與正前方圖片重疊,再繞Y軸轉動90度,形成右面*/
        .set .out_right {
            transform: rotateY(90deg) translateZ(100px);
        }
        /*向屏幕外移動,離觀察者遠離100px,與正前方圖片重疊,再繞X軸轉動90度,形成頂面*/
        .set .out_top {
            transform: rotateX(90deg) translateZ(100px);
        }
        /*向屏幕外移動,離觀察者遠離100px,與正前方圖片重疊,再繞X軸轉動-90度,形成底面*/
        .set .out_bottom {
            transform: rotateX(-90deg) translateZ(100px);
        }
        /*定義小正方體樣式*/
        .set span {
            display: block;
            width: 100px;
            height: 100px;
            position: absolute;
            top: 50px;
            left: 50px;
        }

        .set .s_pic {
            width: 100px;
            height: 100px;
        }

        .set .in_front {
            transform: rotateY(0deg) translateZ(50px);
        }

        .set .in_back {
            transform: translateZ(-50px) rotateY(180deg);
        }

        .set .in_left {
            transform: rotateY(-90deg) translateZ(50px);
        }

        .set .in_right {
            transform: rotateY(90deg) translateZ(50px);
        }

        .set .in_top {
            transform: rotateX(90deg) translateZ(50px);
        }

        .set .in_bottom {
            transform: rotateX(-90deg) translateZ(50px);
        }

        /*鼠標移入后樣式*/
        /**/
        .set:hover .out_front {
            transform: rotateY(0deg) translateZ(200px);
        }

        .set:hover .out_back {
            transform: translateZ(-200px) rotateY(0deg);
        }

        .set:hover .out_left {
            transform: rotateY(-90deg) translateZ(200px);
        }

        .set:hover .out_right {
            transform: rotateY(90deg) translateZ(200px);
        }

        .set:hover .out_top {
            transform: rotateX(90deg) translateZ(200px);
        }

        .set:hover .out_bottom {
            transform: rotateX(-90deg) translateZ(200px);
        }

    </style>
</head>
<body>
<!--創造一個獨立的空間給我們的方塊-->
    <div class="wrap">
    <!--建立一個div,設置共同的動畫樣式,統一協調-->
        <div class="set">
        <!--設置外層的方塊的六個面-->
            <!---->
            <div class="out_front"><img class="pic" src="https://i.loli.net/2019/04/17/5cb6e7b79f246.jpg"></div>
            <!---->
            <div class="out_back"><img class="pic" src="https://i.loli.net/2019/04/17/5cb6e7b79f613.jpg"></div>
            <!---->
            <div class="out_left"><img class="pic" src="https://i.loli.net/2019/04/17/5cb6e7b7c1ae5.jpg"></div>
            <!---->
            <div class="out_right"><img class="pic" src="https://i.loli.net/2019/04/17/5cb6e7b7c19c8.jpg"></div>
            <!---->
            <div class="out_top"><img class="pic" src="https://i.loli.net/2019/04/17/5cb6e7b7c1b1f.jpg"></div>
            <!---->
            <div class="out_bottom"><img class="pic" src="https://i.loli.net/2019/04/17/5cb6e7b7c1b1f.jpg"></div>
        <!--設置內層的方塊的六個面,這里包裹img標簽使用span是為了之后設置樣式時便於區分-->
            <!---->
            <span class="in_front"><img class="s_pic" src="https://i.loli.net/2019/04/17/5cb6e943c912e.jpg"></span>
            <!---->
            <span class="in_back"><img class="s_pic" src="https://i.loli.net/2019/04/17/5cb6e943e4a11.jpg"></span>
            <!---->
            <span class="in_left"><img class="s_pic" src="https://i.loli.net/2019/04/17/5cb6e943e5482.jpg"></span>
            <!---->
            <span class="in_right"><img class="s_pic" src="https://i.loli.net/2019/04/17/5cb6e94411992.jpg"></span>
            <!---->
            <span class="in_top"><img class="s_pic" src="https://i.loli.net/2019/04/17/5cb6e94412ee7.jpg"></span>
            <!---->
            <span class="in_bottom"><img class="s_pic" src="https://i.loli.net/2019/04/17/5cb6e9441387d.jpg"></span>

        </div>
    </div>
</body>
</html>
這個代碼是重新更新了一下的,因為我這里用的圖片在測試時是好好的,放到博客上來就大小不一,我就改了一下圖片的大小

 學習了之后還可以根據這些原理設計出其他有趣的東西


免責聲明!

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



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM