資訊專欄INFORMATION COLUMN
摘要：因為不管你怎么活，明天太陽照樣升起。我們能做的，就是盡全力不讓自己被這種慢性毒藥所蠱惑，努力，努力沖開束縛你的結(jié)界。
工作中一直做普通的網(wǎng)頁，今天瀏覽到一篇做3d旋轉(zhuǎn)的盒子的效果，感覺挺好玩，于是跟著教程練了練，在此做個記錄
html
123456
camera用來控制景深（perspective）
box包裹立方體六個面
face1-6是立方體的六個面
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)點
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);
}
//做一個旋轉(zhuǎn)的動畫，看看6個面寫的是否正確
.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);
}
}
如果是手機觀看的話，增加陀螺儀效果顯得更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);
附上作者忠告：
人在一個環(huán)境下生活太久，就容易產(chǎn)生惰性。因為不管你怎么活，明天太陽照樣升起。
我們能做的，就是盡全力不讓自己被這種慢性毒藥所蠱惑，努力，努力沖開束縛你的結(jié)界。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/111632.html
摘要：實現(xiàn)方法可參考這篇文章純打造的模型渲染器實現(xiàn)全景。天空盒子相信很多打造過或有了解過全景的同行們都知道這個概念。首先將創(chuàng)建好的六個面切割出來，以命名標(biāo)記位置。柱形柱形全景也不算復(fù)雜。 前言 對的，本文就是著重介紹如何使用CSS3中的3D變換打造出H5中的3D效果。靈感來源于造物節(jié)團隊的3d引擎，因為使用方法比較復(fù)雜，也沒有開源的API文檔，于是想自己另外造個輪子，便開始了相關(guān)內(nèi)容的學(xué)習(xí)和...
摘要：一過渡一的作用二的屬性二和動畫一動畫序列書寫簡例二書寫簡例常用屬性簡寫屬性三完整動畫簡例代碼三轉(zhuǎn)換一轉(zhuǎn)換縮放移動旋轉(zhuǎn)設(shè)置元素轉(zhuǎn)換的中心點綜合性寫法二轉(zhuǎn)換三維坐標(biāo)系透視呈現(xiàn)位移旋轉(zhuǎn)一過渡一的作用如果你有一個盒子，他的體內(nèi)也有個小盒子。 ...
摘要：透視即是以現(xiàn)實的視角來看屏幕上的事物，從而展現(xiàn)的效果。旋轉(zhuǎn)則不再是平面上的旋轉(zhuǎn)，而是三維坐標(biāo)系的旋轉(zhuǎn)，就包括軸，軸，軸旋轉(zhuǎn)。必須與屬性一同使用，而且只影響轉(zhuǎn)換元素?？勺杂赊D(zhuǎn)載引用，但需署名作者且注明文章出處。 showImg(https://segmentfault.com/img/bVzJoZ); 話不多說，先上demo 酷炫css3走馬燈/正方體動畫： https://bupt-...
摘要：透視即是以現(xiàn)實的視角來看屏幕上的事物，從而展現(xiàn)的效果。旋轉(zhuǎn)則不再是平面上的旋轉(zhuǎn)，而是三維坐標(biāo)系的旋轉(zhuǎn)，就包括軸，軸，軸旋轉(zhuǎn)。必須與屬性一同使用，而且只影響轉(zhuǎn)換元素。可自由轉(zhuǎn)載引用，但需署名作者且注明文章出處。 showImg(https://segmentfault.com/img/bVzJoZ); 話不多說，先上demo 酷炫css3走馬燈/正方體動畫： https://bupt-...
閱讀 1485·2021-10-13 09:39
閱讀 1408·2021-09-23 11:22
閱讀 2311·2019-08-30 14:05
閱讀 1130·2019-08-29 17:03
閱讀 869·2019-08-29 16:24
閱讀 2293·2019-08-29 13:51
閱讀 720·2019-08-29 13:00
閱讀 1430·2019-08-29 11:24
