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