html 基础之3d旋转立方体的制作（响应式）
程序员文章站
2022-03-26 08:48:37
...
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>立方体的制作</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body,
html {
height: 100%;
}
.perspective {
left: 30%;
top:30%;
position: relative;
width: 50%;
/*在最外面的盒子设置*/
perspective: 800px;
}
.box {
height: 100%;
width: 100%;
transform-style: preserve-3d;
transition: all 3s;
}
.box div {
height: 100%;
width: 100%;
position: absolute;
/* opacity: 0.5; */
}
.box div:nth-child(1) {background: #000000;transform: translateY(50%) rotateX(90deg);}
.box div:nth-child(2) {background: orange;transform: translateY(-50%) rotateX(90deg);}
.box div:nth-child(3) {background: beige;transform: translateX(50%) rotateY(90deg);}
.box div:nth-child(4) {background: blue;transform: translateX(-50%) rotateY(90deg);}
.box div:nth-child(5) {background: red;/* transform: translateZ(550%) ; */}
.box div:nth-child(6) {background: yellow;/* transform: translateZ(-50%); */}
.box:hover{transform: rotateY(360deg) rotateX(360deg);}
</style>
</head>
<body>
<div class="perspective">
<div class="box">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
<script type="text/javascript">
var perspective = document.getElementsByClassName('perspective')[0]
var div = document.querySelectorAll('.box div')
perspective.style.height = perspective.offsetWidth + 'px';
div[4].style.transform = 'translateZ('+perspective.offsetWidth/2+'px)'
div[5].style.transform = 'translateZ(-'+perspective.offsetWidth/2+'px)'
window.οnresize=function(){
perspective.style.height = perspective.offsetWidth + 'px';
div[4].style.transform = 'translateZ('+perspective.offsetWidth/2+'px)'
div[5].style.transform = 'translateZ(-'+perspective.offsetWidth/2+'px)'
}
</script>
</body>
</html>