成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

css3旋轉(zhuǎn)的盒子

MorePainMoreGain / 1367人閱讀

摘要：因?yàn)椴还苣阍趺椿?，明天太?yáng)照樣升起。我們能做的，就是盡全力不讓自己被這種慢性毒藥所蠱惑，努力，努力沖開(kāi)束縛你的結(jié)界。

工作中一直做普通的網(wǎng)頁(yè)，今天瀏覽到一篇做3d旋轉(zhuǎn)的盒子的效果，感覺(jué)挺好玩，于是跟著教程練了練，在此做個(gè)記錄
html


    

        
1

        
2

        
3

        
4

        
5

        
6

camera用來(lái)控制景深（perspective）
box包裹立方體六個(gè)面
face1-6是立方體的六個(gè)面
css

.camera {
    width: 200px;
    height: 200px;
    perspective-origin: center;
    perspective: 200px;
}
.box {
    transform-style:preserve-3d;
    position:relative;
    width:100%;
    height:100%;
    border:1px dashed #000;
}

.face {
    width: 100px;
    height: 100px;
    background: red;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 38px;
    color: white;
    position: absolute;
}
.face1 {
    background: #3498db;
    transform:translateX(50px) translateY(50px) translateZ(50px);
}
.face2 {
    background: #9b59b6;
    transform-origin: 0 0;  //設(shè)置transform的基準(zhǔn)點(diǎn)
    transform:translateX(150px) translateY(50px) translateZ(50px) rotateY(90deg);
}
//transform是有順序的，先旋轉(zhuǎn)再平移和先平移再旋轉(zhuǎn)的效果可能不同
.face3 {
    background: #f1c40f;
    transform-origin: 0 0;
    transform:translateX(50px) translateY(50px) translateZ(50px) rotateX(-90deg);
}
.face4 {
    background: #7f8c8d;
    transform-origin: 0 0;
    transform:translateX(50px) translateY(150px) translateZ(50px) rotateX(-90deg);
}
.face5 {
    background: #2ecc71;
    transform-origin: 100% 100%;
    transform: translateX(-50%) translateY(50px) translateZ(50px) rotateY(-90deg);
}
.face6 {
    background: #34495e;
    transform: translateX(50px) translateY(50px)  translateZ(-50px) rotateY(-180deg);
}
//做一個(gè)旋轉(zhuǎn)的動(dòng)畫，看看6個(gè)面寫的是否正確
.box {
    animation: rotate 4s linear infinite ;
}

@keyframes rotate{
     0%{
         -webkit-transform:rotateY(0) rotateX(0);
     }
     50%{
         -webkit-transform:rotateY(-359.9deg) rotateX(0);
     }
     100% {
         -webkit-transform:rotateY(-359.9deg) rotateX(-359.9deg);
     }
}

如果是手機(jī)觀看的話，增加陀螺儀效果顯得更nice
js

var box = document.querySelectorAll(".box");
window.addEventListener("deviceorientation", function(event) {
    var alpha = event.alpha,
        beta = event.beta,
        gamma = event.gamma;

    box[0].style.webkitTransform = "rotateX(" + beta + "deg) rotateY(" + gamma + "deg) rotateZ(" + alpha + "deg)";
    box[0].style.transform = "rotateX(" + beta + "deg) rotateY(" + gamma + "deg) rotateZ(" + alpha + "deg)";
    box[0].style.mozTransform = "rotateX(" + beta + "deg) rotateY(" + gamma + "deg) rotateZ(" + alpha + "deg)";

}, false);

附上作者忠告：
人在一個(gè)環(huán)境下生活太久，就容易產(chǎn)生惰性。因?yàn)椴还苣阍趺椿睿魈焯?yáng)照樣升起。
我們能做的，就是盡全力不讓自己被這種慢性毒藥所蠱惑，努力，努力沖開(kāi)束縛你的結(jié)界。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/111632.html

相關(guān)文章

  • H5打造3d場(chǎng)景不完全攻略（二）: Amazing CSS3D

    摘要：實(shí)現(xiàn)方法可參考這篇文章純打造的模型渲染器實(shí)現(xiàn)全景。天空盒子相信很多打造過(guò)或有了解過(guò)全景的同行們都知道這個(gè)概念。首先將創(chuàng)建好的六個(gè)面切割出來(lái)，以命名標(biāo)記位置。柱形柱形全景也不算復(fù)雜。 前言 對(duì)的，本文就是著重介紹如何使用CSS3中的3D變換打造出H5中的3D效果。靈感來(lái)源于造物節(jié)團(tuán)隊(duì)的3d引擎，因?yàn)槭褂梅椒ū容^復(fù)雜，也沒(méi)有開(kāi)源的API文檔，于是想自己另外造個(gè)輪子，便開(kāi)始了相關(guān)內(nèi)容的學(xué)習(xí)和...

    fancyLuo 評(píng)論0 收藏0

  • 不會(huì)做動(dòng)畫的程序猿不是好的動(dòng)畫師（如何用css3動(dòng)畫做動(dòng)畫）

    摘要：一過(guò)渡一的作用二的屬性二和動(dòng)畫一動(dòng)畫序列書寫簡(jiǎn)例二書寫簡(jiǎn)例常用屬性簡(jiǎn)寫屬性三完整動(dòng)畫簡(jiǎn)例代碼三轉(zhuǎn)換一轉(zhuǎn)換縮放移動(dòng)旋轉(zhuǎn)設(shè)置元素轉(zhuǎn)換的中心點(diǎn)綜合性寫法二轉(zhuǎn)換三維坐標(biāo)系透視呈現(xiàn)位移旋轉(zhuǎn)一過(guò)渡一的作用如果你有一個(gè)盒子，他的體內(nèi)也有個(gè)小盒子。 ...

    xeblog 評(píng)論0 收藏0

  • 帶你玩轉(zhuǎn)css3的3D！

    摘要：透視即是以現(xiàn)實(shí)的視角來(lái)看屏幕上的事物，從而展現(xiàn)的效果。旋轉(zhuǎn)則不再是平面上的旋轉(zhuǎn)，而是三維坐標(biāo)系的旋轉(zhuǎn)，就包括軸，軸，軸旋轉(zhuǎn)。必須與屬性一同使用，而且只影響轉(zhuǎn)換元素?？勺杂赊D(zhuǎn)載引用，但需署名作者且注明文章出處。 showImg(https://segmentfault.com/img/bVzJoZ); 話不多說(shuō)，先上demo 酷炫css3走馬燈/正方體動(dòng)畫： https://bupt-...

    Panda 評(píng)論0 收藏0

  • 帶你玩轉(zhuǎn)css3的3D！

    摘要：透視即是以現(xiàn)實(shí)的視角來(lái)看屏幕上的事物，從而展現(xiàn)的效果。旋轉(zhuǎn)則不再是平面上的旋轉(zhuǎn)，而是三維坐標(biāo)系的旋轉(zhuǎn)，就包括軸，軸，軸旋轉(zhuǎn)。必須與屬性一同使用，而且只影響轉(zhuǎn)換元素。可自由轉(zhuǎn)載引用，但需署名作者且注明文章出處。 showImg(https://segmentfault.com/img/bVzJoZ); 話不多說(shuō)，先上demo 酷炫css3走馬燈/正方體動(dòng)畫： https://bupt-...

    archieyang 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<