1.Web前端之CSS3中3D立方體以及3D輪播圖

時間 2019-11-19

標籤 1.web web 前端 css3 css 3d 立方體以及欄目 HTML 简体版

原文原文鏈接

1.3D座標系

3D座標能夠用左手來模擬，其中大拇指方向默認是X軸正方向，食指方向是Y軸正方向，中指方向是Z軸正方向。注意：當設置transform：rotateX（90deg）時，至關於將X軸轉動90°，此時Z軸正方向向上，因此設置transform：translateZ(150px)時，就產生了3D立方體的上面，具體原理能夠經過chrome瀏覽器審查元素來調試。javascript

2.3D視圖

　　transform-style：flat(默認，二維效果) / preserve-3d(三維效果)。設置一個元素的transform-style:preserve-3d；隻影響這個元素的子元素(若是孫元素也有3d效果，那麼還必須給子元素設置preserve-3d)。這樣全部子元素均可以相對與父元素的平面進行3d變形操做。和二維變形同樣，三維變形可使用transform屬性來設置。能夠經過制定的函數或者經過三維矩陣來對元素變型。列舉幾個函數：css

　　translate3d(x,y,z) 使元素在這三個緯度中移動,也能夠分開寫，如：translateX(length),translateY(length), translateZ(length)。注意z軸的值只能爲px;html

　　scale3d(number,number,number) 使元素在這三個緯度中縮放，也可分開寫，如：scaleX(),scaleY(),scaleY()。java

　　rotateX(angle) 是元素依照x軸旋轉；jquery

　　rotateY(angle) 是元素依照y軸旋轉；chrome

　　rotateZ(angle) 是元素依照z軸旋轉。瀏覽器

3.perspective和transform-style的設置問題函數

（1）當設置perspective(length);不設置transform-style:preserve-3d；當元素靜止時，會有立體的效果：動畫

（2）當設置perspective(length);不設置transform-style:preserve-3d；當元素旋轉時的效果：this

（3）當設置transform-style:preserve-3d；不設置perspective(length);當元素靜止時，不會有立體的效果：

（4）當設置perspective(length);不設置transform-style:preserve-3d；當元素旋轉時的效果：

注意：（1）若是一個元素以x軸或y軸旋轉90度以上的話，那麼它的背面將面向用戶。背面的元素始終是透明的，因此用戶經過後面看到正面的反向形態，就像是從在玻璃門後面看對外張貼的標誌。爲了防止顯示鏡像的前面。能夠將backface-visibility設置爲hidden;若是backface-visibility:hidden;那麼這個元素就不會在背面可見了。這麼作的一個緣由就是，想一個元素有兩個面，就像一個撲克牌。好比：建立一張撲克牌，正面和背面必定不同，這兩個面的位置是背靠背的。這兩個元素一塊兒轉動，正面逐步向後反轉隱藏，同時背面向前反轉並出現。若是背面的元素是可見的，旋轉時它將掩蓋它底下的元素，而不是露出它下面的元素。

　　　（2）若是父元素設置overflow：hidden；那麼子元素就沒法跳出父元素的平面，也就不能出現3D效果。就如同，transform-style：flat；

3.本身作得3D立方體

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{margin: 0;padding: 0;}
        .box{
            width: 200px;
            height: 200px;
            margin: 100px auto;
            font-size: 30px;
            color:red;
            line-height: 200px;
            position: relative;
            text-align: center;
            perspective:1000px;
            transform-style: preserve-3d;
            transform:rotateX(-30deg) rotateY(30deg);
        }
        .front, .back, .left, .right, .top, .bottom{
            width: 100%;
            height: 100%;
            opacity: 0.5;
            position: absolute;
            left: 0;
            top: 0;
        }
        .front{
            background-color: pink;
            transform: translateZ(100px);
        }
        .back{
            background-color: orange;
            transform: translateZ(-100px);
        }
        .left{
            background-color: blue;
            transform: rotateY(-90deg) translateZ(100px);
        }
        .right{
            background-color: red;
            transform: rotateY(90deg) translateZ(100px);
        }
        .top{
            background-color: green;
            transform: rotateX(-90deg) translateZ(-100px);
        }
        .bottom{
            background-color: yellowgreen;
            transform: rotateX(-90deg) translateZ(100px);
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="front">front</div>
        <div class="back">back</div>
        <div class="left">left</div>
        <div class="right">right</div>
        <div class="top">top</div>
        <div class="bottom">bottom</div>
    </div>
    
</body>
</html>

4.詳細說明參照原地址

http://www.cnblogs.com/duanhuajian/archive/2012/08/30/2664026.html

5.擴展內容

有了3D的原理，咱們就能夠實現3D輪播圖動畫效果了，原理就是每一個li標籤有4個面，分別是前、後、上、下，至關於剔除了3D立方體的左右兩面，再將每一個li標籤添加過渡動畫：transition:all 1s linear;而且每一個li之間必須有延時操做，代碼中的圖片本身能夠從網上下載，可是注意圖片的大小跟盒子的大小要匹配，具體參照以下源碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>3D輪播圖</title>
    <style>
        html,body{
            height: 100%;
        }
        body{
            margin: 0;
            padding: 0;
            background-color: #F7F7F7;
        }
        .banner{
            width: 560px;
            height: 300px;
            margin: 100px auto;
            border: 1px solid #CCC;
            position: relative;
        }
        ul{
            list-style: none;
            margin: 0;
            padding: 0;
            height: 100%;
        }
        li{
            position: absolute;
            top: 0;
            width: 112px;
            height: 100%;
            background-color: green;
            transform: rotateX(0deg);
            transform-style: preserve-3d;
            transition: all 1s;
        }
        li:nth-child(1){
            left: 0;
        }
        li:nth-child(2){
            left: 112px;
        }
        li:nth-child(3){
            left: 224px;
        }
        li:nth-child(4){
            left: 336px;
        }
        li:nth-child(5){
            left: 448px;
        }
        span{
            display: block;
            height: 100%;
            width: 100%;
            position: absolute;
            left: 0;
            top: 0;
        }
        li span:nth-child(1){
            transform: translateZ(150px);
            background-image: url(images/1.jpg);
        }
        li span:nth-child(2){
            transform: rotateX(90deg) translateZ(150px);
            background-image: url(images/2.jpg);
        }
        li span:nth-child(3){
            transform: rotateX(180deg) translateZ(150px);
            background-image: url(images/3.jpg);
        }
        li span:nth-child(4){
            transform: rotateX(270deg) translateZ(150px);
            background-image: url(images/4.jpg);
        }
        li:nth-child(1) span{
            background-position: 0 0;
        }
        li:nth-child(2) span{
            background-position: -112px 0;
        }
        li:nth-child(3) span{
            background-position: -224px 0;
        }
        li:nth-child(4) span{
            background-position: -336px 0;
        }
        li:nth-child(5) span{
            background-position: -448px 0;
        }
        .prev, .next{
            display: block;
            width: 60px;
            height: 60px;
            text-align: center;
            line-height: 60px;
            font-size: 40px;
            color: #FFF;
            text-decoration: none;
            background-color: rgba(0, 0, 0, 0.5);
            position: absolute;
            top: 50%;
            margin-top: -30px;
        }
        .next {
            right: 0;
        }
    </style>
</head>
<body>
    <div class="banner">
        <ul>
            <li>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
            </li>
            <li>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
            </li>
            <li>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
            </li>
            <li>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
            </li>
            <li>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
            </li>
        </ul>
        <a href="javascript:;" class="prev">&lt;</a>
        <a href="javascript:;" class="next">&gt;</a>
    </div>
    <script src="jquery.min.js"></script>
    <script>
        var current = 0;
        $('.prev').on('click',function(){
            current--;
            $('li').each(function(key){
                $(this).css({
                    'transform':'rotateX('+current*90+'deg)',
                    'transition-delay':key*0.25+'s'
                });
            });
        });
        $('.next').on('click',function(){
            current++;
            $("li").each(function(key){
                $(this).css({
                    'transform':'rotateX('+(-current)*90+'deg)',
                    'transition-delay':key*0.25+'s'
                });
            });
        });
    </script>
</body>
</html>

相關標籤/搜索

每日一句

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