用js写一个三维正方形
时间: 2023-10-28 17:04:33 浏览: 50
好的,以下是用 JavaScript 和 CSS3 3D 变换属性编写的三维正方形代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>JS 三维正方形</title>
<style>
#cube {
width: 100px;
height: 100px;
position: relative;
transform-style: preserve-3d;
animation: rotate 3s linear infinite;
}
#cube .face {
position: absolute;
width: 100px;
height: 100px;
background-color: red;
}
#cube .front {
transform: translateZ(50px);
}
#cube .back {
transform: rotateY(180deg) translateZ(50px);
}
#cube .left {
transform: rotateY(-90deg) translateZ(50px);
}
#cube .right {
transform: rotateY(90deg) translateZ(50px);
}
#cube .top {
transform: rotateX(90deg) translateZ(50px);
}
#cube .bottom {
transform: rotateX(-90deg) translateZ(50px);
}
@keyframes rotate {
0% {transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);}
100% {transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);}
}
</style>
</head>
<body>
<div id="cube">
<div class="face front"></div>
<div class="face back"></div>
<div class="face left"></div>
<div class="face right"></div>
<div class="face top"></div>
<div class="face bottom"></div>
</div>
</body>
</html>
```
解释一下代码:
1. 首先,我们创建了一个 `<div>` 元素,并设置了它的 `id` 为 `cube`,这个元素就是我们的三维正方形的容器。
2. 接着,我们创建了六个子元素,分别代表正方形的六个面,每个子元素都有一个 `face` 类,用于 CSS 样式的设置。
3. 我们使用 CSS3 的 3D 变换属性 `transform-style: preserve-3d` 来启用元素的三维变换,然后为每个子元素设置不同的 `transform` 属性,将它们分别放置在正方形的不同面上。
4. 最后,我们使用 CSS3 动画 `animation` 属性,为正方形添加旋转动画效果。
这样,我们就用 JavaScript 和 CSS3 成功创建了一个三维正方形。