CSS3 3D旋轉立方體

時間 2019-11-19

標籤 css3 css 3d 旋轉立方體欄目 CSS 简体版

原文原文鏈接

主要用到動畫css3 animation,特別注意當完成正方體的過程當中，每一個面旋轉時這個面的座標系是跟着變換的，只是他們的相對位置不變，默認的變換基點是（50% 50% 0），咱們能夠使用transform-origin改變默認基點，也能夠按默認的基點來變換，關於rotateX或者rotateY旋轉角度的正負區分，是視線在x軸或者Y軸的+方向向負方向看，若是是順時針則角度爲正值，逆時針爲負值，下面是按默認基點實現立方體的。css

<div class="my3dspace">
 	<div id="cubepages">
 		<div class="page" id="font">1</div>
 		<div class="page" id="back">2</div>
 		<div class="page" id="upper">3</div>
 		<div class="page" id="bottom">4</div>
 		<div class="page" id="left">5</div>
 		<div class="page" id="right">6</div>
 	</div>
 </div>

.my3dspace{margin-top:100px;-webkit-perspective:800;}
#cubepages{width:200px;height:200px;margin:0 auto;-webkit-transform-style:preserve-3d;position:relative;-webkit-animation:rotate 20s infinite;}
.page{position:absolute;width:160px;height:160px;padding:20px;box-sizing:content-box;font-size:100px;text-align:center;line-height:170px;background:#333;color:#fff;-webkit-transition: -webkit-transform 1s linear;}
#font {
    transform: rotateY(0) translateZ(100px);background:#09c45d;
}

#back {
    transform: translateZ(-100px) rotateY(180deg) ;background:#01bb43;
}

#left {
    transform: rotateY(-90deg) translateZ(100px);background:#dd74f7;
}

#right {
    transform: rotateY(90deg) translateZ(100px);background:#eb12c0;
}

#upper {
    transform: rotateX(90deg) translateZ(100px);background:#03cae2;
}

#bottom {
    transform: rotateX(-90deg) translateZ(100px);background:#11aafa;
}
@-webkit-keyframes rotate {
  from {
    transfrom:rotateX(0deg) rotateY(0deg) rotateZ(0deg);
  }
  to{
    transform:rotateX(360deg) rotateY(360deg) rotateZ(360deg);
  }


}

另外一個能夠拖動的例子html

<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>立方體特效</title>
    <style>
    * {
        margin: 0;
        padding: 0;
    }

    body {
        background: #ccc;
    }

    .stage {
        perspective: 800;
        perspective-origin: 50% 50%;
    }

    .cube {
        position: relative;
        width: 200px;
        height: 200px;
        margin: 100px auto;
        background: #ccc;
        transform-style: preserve-3d;
        transform: rotateX(-20deg) rotateY(50deg);
    }

    .cube .face {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        background-size: cover;
        box-shadow: 0 0 100px #5fbcff;
    }

    .front {
        background: url(images/a5.png);
        transform: translateZ(100PX);
    }

    .back {
        background: url(images/a1.png);
        transform: translateZ(-100px);
    }
    /*.left{background:url(images/a2.png);transform:translateX(-100PX) rotateY(-90deg)} 也能夠寫成下面的寫法，旋轉角度後坐標系統也發生了變化*/

    .left {
        background: url(images/a2.png);
        transform: rotateY(-90deg) translateZ(100PX)
    }
    /*.left{background:url(images/a2.png);transform:translateX(-100PX) rotateY(-90deg)} 圍繞y軸旋轉，圖形右側向裏爲正，圖形右側向外爲負*/

    .right {
        background: url(images/a2.png);
        transform: translateX(100PX) rotateY(90deg)
    }

    .up {
        background: url(images/a3.png);
        transform: translateY(-100PX) rotateX(90deg)
    }

    .down {
        background: url(images/a3.png);
        transform: rotateX(-90deg) translateZ(100px)
    }
    </style>
    <script>
    window.onload = function() {
        var box = document.querySelector("#box")
        var y = 50
        var x = 20
        box.onmousedown = function(ev) {
            var oEvent = ev || event;
            var disX = oEvent.clientX - y
            var disY = oEvent.clientY - x
            document.onmousemove = function(ev) {
                var oEvent = ev || event;
                x = oEvent.clientY - disY
                y = oEvent.clientX - disX
                box.style.transform = "rotateX(" + x + "deg) rotateY(" + y + "deg)"
            };
            document.onmouseup = function() {
                document.onmousemove = null
                document.onmouseup = null
            };
            return false
        }

    }
    </script>
</head>

<body>
    <div class="stage">
        <div class="cube" id="box">
            <div class="front face">front</div>
            <div class="back face">back</div>
            <div class="up face">up</div>
            <div class="down face">down</div>
            <div class="left face">left</div>
            <div class="right face">right</div>
        </div>
    </div>
</body>

</html>

裏面用到的css3

background-sizecover保持圖像的縱橫比並將圖像拉長或縮放成將徹底覆蓋背景定位區域的最小大小。web

background-size：contain 意思會保持圖像的縱橫比並將圖像縮放成將適合背景定位區域的最大大小。動畫

相同點：圖片都是等比例縮放url

不一樣點：cover是鋪滿整個顯示區域。若是顯示比例和顯示區域的比例相差很大某些部分會不顯示spa

contain：正好相反，他是按照某一邊來覆蓋顯示區域的，會有白邊3d