用HTML css js 写一个可以旋转的立体正方体
时间: 2024-05-05 20:16:08 浏览: 19
以下是一个简单的代码示例,用HTML、CSS和JS实现旋转立方体。
HTML代码:
```html
<div class="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>
```
CSS代码:
```css
.cube {
position: relative;
width: 200px;
height: 200px;
transform-style: preserve-3d;
transition: transform 1s;
}
.face {
position: absolute;
width: 200px;
height: 200px;
background-color: rgba(255, 255, 255, 0.3);
border: 1px solid #000;
}
.front {
transform: translateZ(100px);
}
.back {
transform: translateZ(-100px) rotateY(180deg);
}
.left {
transform: translateX(-100px) rotateY(-90deg);
}
.right {
transform: translateX(100px) rotateY(90deg);
}
.top {
transform: translateY(-100px) rotateX(90deg);
}
.bottom {
transform: translateY(100px) rotateX(-90deg);
}
```
JS代码:
```js
var cube = document.querySelector('.cube');
document.addEventListener('mousemove', function(event) {
var x = event.clientX;
var y = event.clientY;
var centerX = window.innerWidth / 2;
var centerY = window.innerHeight / 2;
var rotateX = -(y - centerY) / 10;
var rotateY = (x - centerX) / 10;
cube.style.transform = 'rotateX(' + rotateX + 'deg) rotateY(' + rotateY + 'deg)';
});
```
这段JS代码为立方体添加了鼠标移动事件监听器,根据鼠标的位置计算旋转角度并将其应用于立方体的transform属性中。这样就可以通过鼠标移动来旋转立方体了。
相关推荐
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)