思路:大致就是让所有盒子绝对定位,然后给每一个盒子设置动画,让其盒子沿y轴方向旋转,并且向z轴移动,盒子之间的动画需要有一定的延迟时间,让所有盒子旋转到一定位置时,让其父级进行关于y轴的旋转
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>环形</title>
<style type="text/css">
@keyframes run1{
from{
transform: rotateY(0deg) translateZ(0px);
}
to{
transform: rotateY(60deg) translateZ(300px);
}
}
@keyframes run2{
from{
transform: rotateY(0deg) translateZ(0px);
}
to{
transform: rotateY(120deg) translateZ(300px);
}
}
@keyframes run3{
from{
transform: rot