CSS3 3D變換之綜合運用 - 3D box

時間 2019-11-08

標籤 css3 css 3d 變換綜合運用 box 欄目 CSS 简体版

原文原文鏈接

先上效果圖吧javascript

點擊'roll'按鈕，會出現旋轉的動畫css

代碼以下html

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script type="text/javascript" src="JS/jquery-1.12.2.min.js"></script>
    <style type="text/css">
        div#camera{
            width: 500px;
            height: 500px;
            outline: 1px solid black;
            margin:100px auto;
            position: relative;
            perspective: 1000px;
        }
        div#camera>div{
            width: 400px;
            height: 400px;
            position: absolute;
            top:calc(50% - 200px);
            left:calc(50% - 200px);
            outline: 1px solid black;
            transition: all 1s linear;
            background-color: #fff;    
        }
        div#camera>div:nth-child(1){
            transform: rotateY(0deg) translateZ(200px);
            z-index: 99;
        }
        div#camera>div:nth-child(2){
            transform: rotateY(90deg) translateZ(200px);
        }        
        div#camera>div:nth-child(3){
            transform: rotateY(180deg) translateZ(200px);
        }
        div#camera>div:nth-child(4){
            transform: rotateY(270deg) translateZ(200px);
        }
        div#camera>div>img{
            width: 100%;
        }
        button{
            margin: 10px auto;
            display: block;
        }
    </style>
</head>
<body>
    <div id="camera">
        <div><img src="Img/102342_40949584.png"/></div>
        <div><img src="Img/102342_40949584.png"/></div>
        <div><img src="Img/102342_40949584.png"/></div>
        <div><img src="Img/102342_40949584.png"/></div>
    </div>
    <button value="roll">roll</button>
    <script type="text/javascript">
        $(document).ready(function() {
            (function() {
                var count=0, reversedCount=4; 
                var changeRotateY = function($ele, deg) {
                    var index = $ele.index()+1+count;
                    var deg = deg*index;
                    $ele[0].setAttribute('style','transform:rotateY('+deg+'deg) translateZ(200px);')
                }
                $('button[value="roll"]').on('click', function() {
                    $('div#camera>div').each(function() {
                        changeRotateY($(this), 90);
                    });
                    // changeRotateY($('div#camera>div:nth-child(1)'), 90);
                    // changeRotateY($('div#camera>div:nth-child(2)'), 90);
                    // changeRotateY($('div#camera>div:nth-child(3)'), 90);
                    // changeRotateY($('div#camera>div:nth-child(4)'), 90);
                    count++; 
                    reversedCount--;
                    $('div#camera>div').eq(reversedCount%4).css({'z-index':'99'}).siblings().css({'z-index':'0'});
                    if(reversedCount==0){
                        reversedCount=4;
                    }
                });
            })();

            
        });
    </script>
</body>
</html>

稍微解析一下：java

CSS部分用來生成靜態的三維盒子，#camera下的四個子div分別旋轉0°、90°、180°、270°後再以自身旋轉後的座標系爲基準translateZ(200px)，至關於四個子div分別向前（也就是正對屏幕的方向）、向右、向後（也就是背向屏幕的方向）、向左移動了200px，因爲div自己的尺寸就是400px*400px，所以作此變換後四個div就圍成了一個立體的盒子。此時從上往下看，效果圖以下：jquery

這裏的transform的順序很重要，若是是先rotateY再translateZ, 那麼translateZ是以rotate之後的座標軸進行平移，這樣才能達到先後左右平移的效果；若是先translateZ再rotateY, 那麼全部元素都會先平移，而後在一個位置上進行旋轉了！segmentfault
changeRotateY函數用來改變div的旋轉角度，根據該元素的eq和傳入的count值(按鈕被點擊的次數)來設置元素的rotateY的值。因爲遇到了動態獲取transform值的問題這裏的函數靈活性不高，有點遺憾。第一次點擊的時候，count爲0，index()爲0的元素的rotateY會從0°增長到90°，index()爲1的元素的rotateY會從90°增長到180°，and so on; 第二次點擊，count爲1，上述值會各增長90°，完成無限旋轉的效果；函數
遇到的一個很大的問題就是轉到後面的元素依舊會顯示出來。試過background-color和backface-visibility:hidden都不怎麼好用，尤爲是backface-visibility，轉到90度的時候仍是顯示的，在90.01°時纔會隱藏backface, 若是想用backface-visibility來隱藏後面元素的話得fine-tune, 還會引發稍微的錯位問題，遂放棄；動畫
最後使用的是z-index來隱藏後面的元素，動態設置轉到最前面的元素的z-index爲較大值。注意z-index屬性不對position爲static的元素起做用。固然咱們這裏的div們都是absolute，因此就能應用得很好啦~this
要顯示的元素的eq值分別爲三、二、一、0，固然直接用遞增的count變量+switch/if else語句也能作，但陡減可讀性；取而代之的是增長了一個遞減的reversedCount變量，它來負責匹配每次要設置z-index的元素。spa

歡迎轉載，請註明出處。

參考資料：玩轉 CSS 3D - 原理篇

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。