利用css3动画 + html 写一个旋转立方块
利用css3的 旋转 平移 3D等等属性写一个立体旋转的立方体;
首先先写出立方体的结构,一个立方体六个面所以写六个div
然后写出初始样式设置方块的大小,利用弹性盒子居中到页面的中间,变成了这样
接下来用定位属性把他们放在一起
给父元素一个3D转换transform-style: preserve-3d;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>立体方盒</title>
<style>
html{
height:100%;
}
body{
height:100%;
margin:0;
display: flex;
align-items: center;
justify-content: center;
}
.box{
width:100px;
height:100px;
position: relative;
transform-style: preserve-3d;
}
.whole{
width:100px;
height:100px;
border:1px solid #ddd;
position: absolute;
top:0;
left:0;
}
</style>
</head>
<body>
<div class="box">
<div class="whole top"></div>
<div class="whole bottom"></div>
<div class="whole left"></div>
<div class="whole right"></div>
<div class="whole front"></div>
<div class="whole behind"></div>
</div>
</body>
</html>
接下来设置方块的六个面
利用旋转平移 拼装成一个立方体
不动的时候就变成了这样
加上旋转属性就会发现transform: rotatex(45deg) rotatey(45deg);
最后加上旋转动画就完成啦
最终代码
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>立体方盒</title>
<style>
html{
height:100%;
}
body{
height:100%;
margin:0;
display: flex;
align-items: center;
justify-content: center;
transform-style: preserve-3d;
}
.box{
width:100px;
height:100px;
position: relative;
transform-style: preserve-3d;
animation:rotate 5s linear infinite;
}
.whole{
width:100px;
height:100px;
border:1px solid #757575;
opacity: 0.6;
position: absolute;
top:0;
left:0;
}
@keyframes rotate{
from{
transform: rotateX(0deg) rotateY(0deg);
}
to{
transform: rotateX(360deg) rotateY(720deg);
}
}
.top {
background:darkmagenta;
/* 想象旋转轴指向自己,顺时针为正值 */
transform: rotateX(90deg) translateZ(50px);
}
.bottom {
background:yellow;
transform: rotateX(-90deg) translateZ(50px);
}
.left {
background:cyan;
transform: rotateY(-90deg) translateZ(50px);
}
.right {
background:chartreuse;
transform: rotateY(90deg) translateZ(50px);
}
.behind {
background:chocolate;
/* 使用 平移 进行位置控制 */
transform: translateZ(-50px) rotateX(180deg);
}
.front {
background:red;
transform: translateZ(50px) rotateX(180deg);
}
</style>
</head>
<body>
<div class="box">
<div class="whole top"></div>
<div class="whole bottom"></div>
<div class="whole left"></div>
<div class="whole right"></div>
<div class="whole front"></div>
<div class="whole behind"></div>
</div>
</body>
</html>