用html和css做一个旋转的正方体
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
section{
width: 200px;
height: 200px;
/* 设置景深 */
perspective: 10000px;
margin: 50px auto;
}
section:hover #box{
transform:rotateX(360deg) rotateY(360deg) ;
}
#box{
width: 200px;
height: 200px;
perspective: 10000px;
/* 既是p标签的舞台,自己也是section标签的演员 要设置transform-style*/
transform-style: preserve-3d;
position: relative;
transition: transform 10s linear 0s;
}
#box p{
width: 200px;
height: 200px;
position: absolute;
top: 0;
left: 0;
}
#front{
/* 让盒子向前移动100px,更靠近观察者100px */
transform: translateZ(100px);
background-color:chocolate;
}
#top{
/* 让盒子绕着X轴3D旋转90度,此时盒子垂直于电脑屏幕,然后再让它沿着此时的Z轴正方向(向上)移动100px*/
transform: rotateX(90deg) translateZ(100px);
background-color:rgb(22, 243, 232);
}
#back{
/* 让盒子向后移动100px,远离观察者100px */
transform: translateZ(-100px);
background-color:rgb(13, 105, 241);
}
#bottom{
/* 让盒子绕着X轴3D旋转-90度,此时盒子垂直于电脑屏幕,然后再让它沿着此时的Z轴正方向(向下)移动100px */
transform: rotateX(-90deg) translateZ(100px);
background-color:rgb(124, 238, 17);
}
#left{
/* 让盒子绕着Y轴3D旋转-90度,此时盒子垂直于电脑屏幕,然后再让它沿着此时的Z轴正方向(向左)移动100px*/
transform: rotateY(-90deg) translateZ(100px);
background-color:rgb(233, 10, 177);
}
#right{
/* 让盒子绕着Y轴3D旋转90度,此时盒子垂直于电脑屏幕,然后再让它沿着此时的Z轴正方向(向右)移动100px*/
transform: rotateY(90deg) translateZ(100px);
background-color:rgb(238, 17, 17);
}
</style>
</head>
<body>
<section>
<div id="box">
<p id="front">正面</p>
<p id="top">顶面</p>
<p id="back">背面</p>
<p id="bottom">底面</p>
<p id="left">左面</p>
<p id="right">右面</p>
</div>
</section>
</body>
</html>
效果如图:
当然如果把颜色设置为rgba加点透明,去掉文字会更好看一点。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
section{
width: 200px;
height: 200px;
/* 设置景深 */
perspective: 10000px;
margin: 50px auto;
}
@keyframes r {
from{
transform:rotateX(0deg) rotateY(0deg)
}
to{
transform:rotateX(360deg) rotateY(360deg)
}
}
#box{
width: 200px;
height: 200px;
perspective: 10000px;
/* 既是p标签的舞台,自己也是section标签的演员 要设置transform-style*/
transform-style: preserve-3d;
position: relative;
animation: r 10s linear 0s infinite alternate;
}
#box p{
width: 200px;
height: 200px;
position: absolute;
top: 0;
left: 0;
}
#front{
transform: translateZ(100px);
background-color:rgba(210, 105, 30, 0.438);
}
#top{
transform: rotateX(90deg) translateZ(100px);
background-color:rgba(22, 243, 232, 0.226);
}
#back{
transform: translateZ(-100px);
background-color:rgba(13, 104, 241, 0.397);
}
#bottom{
transform: rotateX(-90deg) translateZ(100px);
background-color:rgba(124, 238, 17, 0.315);
}
#left{
transform: rotateY(-90deg) translateZ(100px);
background-color:rgba(233, 10, 177, 0.432);
}
#right{
transform: rotateY(90deg) translateZ(100px);
background-color:rgba(238, 17, 17, 0.438);
}
</style>
</head>
<body>
<section>
<div id="box">
<p id="front"></p>
<p id="top"></p>
<p id="back"></p>
<p id="bottom"></p>
<p id="left"></p>
<p id="right"></p>
</div>
</section>
</body>
</html>