< 二 > 实现一个转动的立体六边形
结果示例图（因为录制工具的问题这个gif显得有些卡顿，在实际网页中并不会）：
示例代码： .test{ font-size:20px; } .container{ width: 500px; height: 420px; position: relative; margin: 0 auto; padding-top: 200px; perspective: 2000px; -webkit-perspective: 2000px; perspective-origin-y: 100px; -webkit-perspective-origin-y: 100px; } .carousel{ width: 100%; height: 100%; position: absolute; transform-style: preserve-3d; transform: translateZ(-400px) rotateY(0deg); animation:rotate0 10s infinite linear; /* 添加动画名叫rotate0，持续10s,以线性持续运动*/ } .carousel div{ width:350px; height:250px; background-color: rgba(72,83,121,0.5); display: block; position: absolute; left: 50%; margin-left: -150px; font-size:80px; color:red; display:flex; align-items:center;/*垂直居中*/ justify-content: center;/*水平居中*/ } .rotate-0{ transform: rotateY(0deg) translateZ(400px); } .rotate-1{ transform: rotateY(60deg) translateZ(400px); } .rotate-2{ transform: rotateY(120deg) translateZ(400px); } .rotate-3{ transform: rotateY(180deg) translateZ(400px); } .rotate-4{ transform: rotateY(240deg) translateZ(400px); } .rotate-5{ transform: rotateY(300deg) translateZ(400px); } @keyframes rotate0{ /* 动画rotate0 */ from{ transform: translateZ(-400px) rotateY(360deg); }to{ transform: translateZ(-400px) rotateY(0deg); } } <div id="test"> <div class="container"> <div id="carousel" class="carousel"> <div class="rotate-0">1</div> <div class="rotate-1">2</div> <div class="rotate-2">3</div> <div class="rotate-3">4</div> <div class="rotate-4">5</div> <div class="rotate-5">6</div> </div> </div> </div> 注： animation属性是一个简写属性，它有六个属性，分别是： * animation-name：动画名称 * animation-duration：完成所定义动画曲线持续时间 * animation-timing-function：动画曲线 * animation-delay：动画开始之前的延迟时间 * animation-iteration-count：动画播放次数 * animation-direction：是否轮流反向播放动画 animation的兼容性：