CSS3过渡旋转透视2d3d动画等效果_css二维动画 可以做透视吗

才发现原来CSS3这么好用…

CSS3盒子模型

CSS3中可以通过 box-sizing 来指定盒模型，有2个值，即可指定为 content-box、border-box，这样计算盒子大小的方式就发生了改变。

• box-sizing: content-box 盒子大小为 width+padding+border(默认)
• box-sizing: border-box 盒子大小为 width (前提padding和border不会超过width宽度)

* {
   
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
1
2
3
4
5
6

a. CSS3滤镜filter

filter CSS属性将模糊或颜色偏移等图形效果应用于元素

filter: 函数();
例如：
filter: blur(5px);  /*blur模糊处理，数字越大越模糊*/
1
2
3

b.CSS3 calc函数

calc() 可以在声明CSS属性值时执行一些计算

width: calc(100%-80px);
1

c. CSS3过渡

过渡动画：是重复一个状态渐渐地过渡到另一个状态

transition: 要过渡的属性 花费时间 运动曲线 何时开始；
经常搭配 /* :hover */一起使用
例如：
transition: width .5s, height .5s
1
2
3