用css3做几个3D的图形

[JesseZhao1990]

https://codepen.io/zhaojianxin/pen/bvWMBE

https://codepen.io/zhaojianxin/pen/OvmEbg

https://codepen.io/zhaojianxin/pen/YaVRMO

[JesseZhao1990]

过渡、动画和变换

1. 过渡

transition-delay 指定过渡开始前的延迟时间
transition-duration 指定过渡的持续时间
transition-property 指定应用过渡的属性
transition-timing-function 指定过渡期间应用中间值的方式
transition 简写，在一条声明中指定所有的过渡细节的简写属性。

transition简写属性的格式如下：
transition : transition-property transtion-duration transtion-timing-function transtion-delay

2.动画

animation-delay 设置动画开始前的延迟
animation-drection 设置动画循环播放的时候是否反向播放
animation-duration 设置动画播放的持续时间
animation-iteration-count 设置动画的播放次数
animation-name 指定动画名称
animation-play-state 运行动画暂停和重复播放
animation-timing-function 指定如何计算动画中间值
animation 简写属性

animation 简写属性的格式如下：
animation : animation-name animation-duration animation-timing-function animation-delay animation-iteration-count

3.变换

transform 指定应用的变换功能
transform-origin 指定变换的起点
transform-style 规定被嵌套元素如何在3D空间中显示，值是flat或者preserve-3d;默认是flat，表示子元素将不保留其3D位置，preserve-3d表示子元素将保留其3D位置。
perspective 规定3D元素的透视效果
perspective-origin 规定3D元素的底部位置
backface-visibility 定义元素在不面对屏幕时是否可见

通过transform属性为元素应用变换，这个属性允许的值是一组预定义的函数。如下所示
translate() 在水平方向和垂直方向上平移元素
translateX()
translateY()
scale() 在水平方向和垂直方向缩放元素
scaleX()
scaleY()
rotate()
rotateX()
rotateY()
skew()
skewX()
skewY()