CSS3-3D动画制作旋转立方体
3D动画是CSS3才有的属性,制作立方体的思路是使用6个正方形div,通过绝对定位+旋转+位移来合成一个立方体。然后再使父亲旋转。
旋转后的面会变成新的X-Y面,旋转后Z轴和位移是对新的面来说的,不是原来的面来说的,这点很重要,一定不要搞错。(也就是旋转后坐标轴的方向会改变)
代码很短,主要属性都加了注释了
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS3动画制作旋转立方体</title>
<style>
/* 制作动画的关键字@keyframes */
@keyframes rotate {