JavaScript绘制立体面环形旋转
<!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>
评论 (0)