友友们!!纯纯用css就可以写出会自己旋转的3D立方体!
首先需要了解几个属性:
transform 变形
translate 位移
rotate 旋转
perspective 透视
transform-style:preserve-3d 开启立体呈现
定义动画:
@keyframes name{
from{
transform:rotate(0deg)
}
to{
transform:rotate(360deg)
}
}
调用动画:
animation:name 1s linear infinite
认识了这些需要用到的属性以后,我们就可以开始写代码啦~
我们可以先写出html结构
<div class="cube">
<main>
<div class="front"></div>
<div class="back"></div>
<div class="left"></div>
<div class="right"></div>
<div class="top"></div>
<div class="bottom"></div>
</main>
</div>
写出立方体的六个面,并且给出每个面不同的类名。
接下来再来写CSS部分:
给大盒子设置宽高,并且给出视距,以便等会更好的观察立方体
.cube {
width: 200px;
height: 200px;
perspective: 800px;
margin: 100px;
}
然后咱们要给盒子的主体调整一下位置,其他六个面可以更好的摆放,记得要给主体父盒子开启3D立体呈现哦~
main {
width: 100%;
height: 100%;
transform: translateZ(-100px);
transform-style: preserve-3d;
}
接下来就是要调整立方体的六个面了,先统一设置div的宽高:
.cube div {
width: 100%;
height: 100%;
position: absolute;
}
然后就可以一个面一个面的位移、旋转,把它们调整至我们需要它所在的位置了
.front {
background: pink;
transform: translateZ(100px);
}
.back {
background-color: grey;
transform: translateZ(-100px);
}
.left {
background-color: khaki;
transform: rotateY(90deg) translateZ(100px);
}
.right {
background-color: lightblue;
transform: rotateY(90deg) translateZ(-100px);
}
.top {
background-color: lightseagreen;
transform: rotateX(90deg) translateZ(-100px);
}
.bottom {
background-color: lightsalmon;
transform: rotateX(90deg) translateZ(100px);
}
这个部分的位置转换、数值等一定要算清楚噢,让每个面都能连接在一起~
设置好位置后 目前我们还是看不出来的,页面还是这个效果
这个时候 我们就要定义动画了:
@keyframes rotate {
from {
transform: rotateX(0) rotateY(0);
}
to {
transform: rotateX(360deg) rotateY(360deg);
}
}
让父级调用该动画:
在前面main的代码中再添加调用动画的代码
animation: rotate 5s linear infinite;
这个时候我们就可以看到立方体开始旋转啦~
非常有意思的小实验噢~ 大家可以试试
以下是完整代码:
<!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>
.cube {
width: 200px;
height: 200px;
perspective: 800px;
margin: 100px;
}
main {
width: 100%;
height: 100%;
transform: translateZ(-100px);
transform-style: preserve-3d;
animation: rotate 5s linear infinite;
}
@keyframes rotate {
from {
transform: rotateX(0) rotateY(0);
}
to {
transform: rotateX(360deg) rotateY(360deg);
}
}
.cube div {
width: 100%;
height: 100%;
position: absolute;
}
.front {
background: pink;
transform: translateZ(100px);
}
.back {
background-color: grey;
transform: translateZ(-100px);
}
.left {
background-color: khaki;
transform: rotateY(90deg) translateZ(100px);
}
.right {
background-color: lightblue;
transform: rotateY(90deg) translateZ(-100px);
}
.top {
background-color: lightseagreen;
transform: rotateX(90deg) translateZ(-100px);
}
.bottom {
background-color: lightsalmon;
transform: rotateX(90deg) translateZ(100px);
}
</style>
</head>
<body>
<div class="cube">
<main>
<div class="front"></div>
<div class="back"></div>
<div class="left"></div>
<div class="right"></div>
<div class="top"></div>
<div class="bottom"></div>
</main>
</div>
</body>
</html>