搜索到
2
篇与
立体
的结果
-
JavaScript绘制立体面环形旋转 JavaScript绘制立体面环形旋转{anote icon="fa-arrow-circle-right" href="http://www.000081.xyz/index.php/118-1.html" type="secondary" content="预览"/}<!DOCTYPE html> <html> <head> <meta charset="utf8" /> <title>立体布局</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; border: 0; } /* 加入远近关系，使画面更真实，防止两边旋转90度面不显示 */ body { perspective: 1000px; } .box { width: 200px; height: 200px; position: absolute; left: 0; top: 0; bottom: 0; right: 0; margin: auto; transform-style: preserve-3d; transform: rotate3d(1, 0, 0, -30deg); animation: donghua 5s 0.2s linear infinite; /* 加入远近关系之后，增加距离顶部高度 */ margin-top: 200px; } @keyframes donghua { 0% { transform: rotateX(0); } 100% { transform: rotateX(360deg); } } .box div { width: 100px; height: 200px; font-size: 5em; text-align: center; position: absolute; line-height: 200px; } </style> </head> <body> <div class="box" id="box"></div> <script> function getcolor() { var _color = [ "0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "a", "b", "c", "d", "e", "f", ]; var cache_text = "#"; for (var i = 0; i < 6; i++) { cache_text += _color[parseInt(Math.random() * 16)]; } return cache_text; } var _box = document.getElementById("box"); for (var i = 0; i <= 12; i++) { _box.innerHTML += "<div></div>"; } var _div = _box.getElementsByTagName("div"); var _text = [ "☯", "子", "丑", "寅", "卯", "辰", "巳", "午", "未", "申", "酉", "戌", "亥", ]; for (var i = 0; i <= 12; i++) { _div[i].innerHTML = _text[i]; _div[i].style.background = getcolor(); _div[i].style.transform = "rotateY(" + i * 30 + "deg) translateZ(200px) "; if (i == 0) { _div[i].style.border = "10px solid red"; _div[i].style.transform = ""; } } function changecolor() { for (var i = 0; i <= 13; i++) { if (i == 0) _div[i].style.border = "10px solid " + getcolor(); _div[i].style.backgroundColor = getcolor(); } } setInterval(() => { changecolor(); }, 100); </script> </body> </html> -
htm5+css3绘制立体面环形旋转 htm5+css3绘制立体面环形旋转{anote icon="fa-arrow-circle-right" href="http://www.000081.xyz/index.php/48-1.html" type="secondary" content="预览"/}<!DOCTYPE html> <html> <head> <meta charset="utf8"> <title>立体布局</title> <style> *{ margin: 0; padding: 0; box-sizing: border-box; border: 0; } /* 加入远近关系，使画面更真实，防止两边旋转90度面不显示 */ body{ perspective: 1000px; } .box{ width: 200px; height: 200px; position: absolute; left: 0; top: 0; bottom: 0; right: 0; margin: auto; transform-style: preserve-3d; transform: rotate3d(1, 0, 0, -30deg); transform-style: preserve-3d; animation: donghua 5s 0.2s linear infinite; /* 加入远近关系之后，增加距离顶部高度 */ margin-top: 200px; } @keyframes donghua { 0% { transform: rotateX(0); } 100% { transform: rotateX(360deg); } } .box div{ width: 100px; height: 200px; font-size: 5em; text-align: center; position: absolute; line-height: 200px; } .box div:nth-child(1){ border: 10px solid red; } .box div:nth-child(2){ background-color: rgb(255, 238, 0); transform: translateZ(200px); } .box div:nth-child(3){ background-color: rgb(255, 187, 0); transform: translateZ(-200px); } .box div:nth-child(4){ background-color: rgb(60, 255, 0); transform: translateZ(175px) translateX(100px) rotateY(30deg); } .box div:nth-child(5){ background-color: rgb(60, 134, 85); transform: translateZ(100px) translateX(175px) rotateY(60deg); } .box div:nth-child(6){ background-color: rgb(0, 255, 234); transform: translateX(200px) rotateY(90deg); } .box div:nth-child(7){ background-color: rgb(0, 204, 255); transform: translateX(-200px) rotateY(90deg); } .box div:nth-child(8){ background-color: rgb(0, 110, 255); transform: translateZ(175px) translateX(-100px) rotateY(-30deg); } .box div:nth-child(9){ background-color: rgb(111, 0, 255); transform: translateZ(100px) translateX(-175px) rotateY(-60deg); } .box div:nth-child(10){ background-color: rgb(255, 0, 200); transform: translateZ(-175px) translateX(-100px) rotateY(30deg); } .box div:nth-child(11){ background-color: rgb(255, 0, 98); transform: translateZ(-175px) translateX(100px) rotateY(-30deg); } .box div:nth-child(12){ background-color: rgb(0, 225, 255); transform: translateZ(-100px) translateX(-175px) rotateY(60deg); } .box div:nth-child(13){ background-color: rgb(43, 37, 4); transform: translateZ(-100px) translateX(175px) rotateY(-60deg); } </style> </head> <body> <div class="box"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> </body> </html>
