JavaScript實(shí)現(xiàn)的3D旋轉(zhuǎn)魔方動畫效果實(shí)例代碼

來源：懂視網(wǎng) 責(zé)編：小采時(shí)間：2020-11-27 21:52:53

JavaScript實(shí)現(xiàn)的3D旋轉(zhuǎn)魔方動畫效果實(shí)例代碼

JavaScript實(shí)現(xiàn)的3D旋轉(zhuǎn)魔方動畫效果實(shí)例代碼:JS1K是JavaScript編程競賽——參加競賽的規(guī)則很簡單，腳本必須小于1K，競賽網(wǎng)站開始也只是為了娛樂，卻意外地收到了很多優(yōu)秀的作品。這是2016年JS1k上傳的作品，用幾十行代碼實(shí)現(xiàn)的一個(gè)3D旋轉(zhuǎn)魔方：代碼如下： function z(t, e) { retu

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

導(dǎo)讀JavaScript實(shí)現(xiàn)的3D旋轉(zhuǎn)魔方動畫效果實(shí)例代碼:JS1K是JavaScript編程競賽——參加競賽的規(guī)則很簡單，腳本必須小于1K，競賽網(wǎng)站開始也只是為了娛樂，卻意外地收到了很多優(yōu)秀的作品。這是2016年JS1k上傳的作品，用幾十行代碼實(shí)現(xiàn)的一個(gè)3D旋轉(zhuǎn)魔方：代碼如下： function z(t, e) { retu

JS1K是JavaScript編程競賽——參加競賽的規(guī)則很簡單，腳本必須小于1K，競賽網(wǎng)站開始也只是為了娛樂，卻意外地收到了很多優(yōu)秀的作品。

這是2016年JS1k上傳的作品，用幾十行代碼實(shí)現(xiàn)的一個(gè)3D旋轉(zhuǎn)魔方：

代碼如下：

function z(t, e) {
 return t? e? t.appendChild(e) : "width:"+t+"px;height:"+t+"
px;position:absolute;" : document.createElement("div")
}

function w() {
 ++t==360&&(t=0, x=++x%3)
 for (i in m) 2 == m[i][s[x]] ? m[i][u][a] = r+s[x]+"(" + t + "deg)" : 0;
 c[u][a] = r+"3d(1,1,1," + t + "deg)", 
	requestAnimationFrame(w)
}
var a = "transform",
	p = "background-color:",
	y = a+"-style:preserve-3d;",
 u = "style",
 v = "cssText",
 B = z(),
 c = z(),
 t = x = 0,
 d, e, f, g, h, k, l, m = [], n, i, r="rotate", s = ["X","Y","Z"];

B[u][v] = "perspective:900px;"+z(600)+p+"#666";
c[u][v] = y + z(240) +"top:30%;left:30%", z(B, c), z(window.b, B);

for (l = 27; l--; z(c, f)) {
 f = z(), 
 f[u][v] = y + z(240), 
 f.X = g = l % 3, 
 f.Y = h = (l - g) % 9 / 3, 
 f.Z = k = ~~(l / 9), e = z(), 
 e[u][v] = y + z(80) +a+":translate3d(" + 80 * g + "px," + 
80 * h + "px," + 80 * (k-1) + "px)";
 for (n = 6; n--; z(e, d)) 
 	d = z(), 
 	d[u][v] = y + z(72) + "border-radius:9px;border:4px solid
 #000;opacity:0.9;"+a+":"+r+"X(" + (4 > n ? 90 * n : 0) 
 + "deg)"+r+"Y(" + (4 > n ? 0 : 4 == n ? -90 : 90) + "deg)translateZ(40px);"+p+ 
 	(0==n&&2==k?"#05C":1==n&&0==h?"#FD0":
 2==n&&0==k?"#0A6":3==n&&2==h?"#FFF":4==n&&0==g?"#F60":5==n&&2==g?"#C24":"#000");
 z(f, e), m.push(f)
}

w();

知識點(diǎn)擴(kuò)展

JS如何實(shí)現(xiàn)旋轉(zhuǎn)的魔方，瀏覽器從其他標(biāo)簽頁回來依然勻速旋轉(zhuǎn)？

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

<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>Document</title>
</head>

<body>
 <div class="cube" onclick="stop()">
 <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>
<style>
 .cube {
 width: 400px;
 height: 400px;
 transition: all 3s;
 margin: 300px auto;
 /* 作用于所有3d轉(zhuǎn)換的子元素 設(shè)置給父級 */
 /* perspective: 1000px; */
 /* transform: rotateX(30deg) rotateY(45deg); */
 /* 平面到立方 默認(rèn)值:平面flat*/
 transform-style: preserve-3d;

 position: relative;
 }

 /* div:hover {
 transform: rotateY(90deg) translateZ(-200px);
 opacity: 0.5;
 } */
 .front,
 .back,
 .left,
 .right,
 .top,
 .bottom {
 width: 100%;
 height: 100%;
 text-align: center;
 line-height: 400px;
 position: absolute;
 opacity: 0.9;
 left: 0;
 top: 0;
 }

 .front {
 background-color: palevioletred;
 background-image: url('http://img1.gtimg.com/tj/pics/hv1/117/208/2153/140051982.jpg');
 transform: translateZ(200px);
 }

 .back {
 background-color: yellow;
 transform: translateZ(-200px);
 background-image: url('https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=841408372,3004217725&fm=11&gp=0.jpg');
 }

 .left {
 background-color: pink;
 background-image: url('https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2388632836,3966607624&fm=26&gp=0.jpg');
 transform: rotateY(90deg) translateZ(-200px)
 }

 .right {
 background-color: yellowgreen;
 background-image: url('https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=192610795,467565159&fm=26&gp=0.jpg');
 transform: rotateY(90deg) translateZ(200px)
 }

 .top {
 background-color: skyblue;
 background-image: url("https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2936477803,4198185787&fm=15&gp=0.jpg");
 transform: rotateX(90deg) translateZ(200px)
 }

 .bottom {
 background-color: orange;
 background-image: url('http://img0.pclady.com.cn/pclady/1611/02/1612285_jyz.jpg');
 transform: rotateX(90deg) translateZ(-200px)
 }
</style>
<script>
 window.onload = function () {
 let cube = document.querySelector('.cube')
 let timer = null
 let x = 0; y = 0;
 function rotate() {
 cube.style.transform = 'rotateX(' + x + 'deg)' + '' + 'rotateY(' + y + 'deg)';
 x += 30
 y += 45
 }
 function stop() {
 clearInterval(timer)
 }
 clearInterval(timer);
 timer = setInterval(() => {
 rotate();
 }, 1000);
 // 監(jiān)聽是否在當(dāng)前頁，并置為已讀
 // document.addEventListener("visibilitychange", function () {
 // if (document.hidden) { //不處于當(dāng)前頁面
 // // do something
 // clearInterval(timer)
 // } else {
 // timer;
 // }
 // });

 var hiddenProperty = 'hidden' in document ? 'hidden' :
 'webkitHidden' in document ? 'webkitHidden' :
 'mozHidden' in document ? 'mozHidden' :
  null;
 var visibilityChangeEvent = hiddenProperty.replace(/hidden/i, 'visibilitychange');
 var onVisibilityChange = function () {
 if (!document[hiddenProperty]) {
 timer = setInterval(() => {
  rotate();
 }, 1000);
 console.log(hiddenProperty);
 } else {
 clearInterval(timer)
 }
 }
 document.addEventListener(visibilityChangeEvent, onVisibilityChange);
 // document.addEventListener("visibilitychange", function () {
 // if (!document.hidden) { //處于當(dāng)前頁面
 // timer = setInterval(() => {
 // rotate();
 // }, 1000);
 // console.log('active');
 // } else {
 // clearInterval(timer);
 // console.log('hidden');
 // }
 // });
 }
</script>

</html>

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

JavaScript實(shí)現(xiàn)的3D旋轉(zhuǎn)魔方動畫效果實(shí)例代碼

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

標(biāo)簽：旋轉(zhuǎn) 魔方動畫

熱門焦點(diǎn)

JavaScript實(shí)現(xiàn)的3D旋轉(zhuǎn)魔方動畫效果實(shí)例代碼

JavaScript實(shí)現(xiàn)的3D旋轉(zhuǎn)魔方動畫效果實(shí)例代碼

JavaScript實(shí)現(xiàn)的3D旋轉(zhuǎn)魔方動畫效果實(shí)例代碼

最新推薦

猜你喜歡

熱門推薦