H5C3过渡

H5C3
CSS3盒模型
CSS3中可以通过box-sizing 来指定盒模型,即可指定为content-box、border-box,这样我们计算盒子大小的方式就发生了改变。
可以分成两种情况:
1、box-sizing: content-box 盒子大小为 width + padding + border content-box:此值为其默认值,其让元素维持W3C的标准Box Mode
2、box-sizing: border-box 盒子大小为 width 就是说 padding 和 border 是包含到width里面的
注:上面的标注的width指的是CSS属性里设置的width: length,content的值是会自动调整的。

过渡(CSS3)
transition 简写属性,用于在一个属性中设置四个过渡属性。
transition-property 规定应用过渡的 CSS 属性的名称。
transition-duration 定义过渡效果花费的时间。默认是 0。 3
transition-timing-function 规定过渡效果的时间曲线。默认是 “ease”。
transition-delay 规定过渡效果何时开始。默认是 0。 3
2D变形(CSS3) transform
让定位的盒子水平居中
缩放 scale(x, y)
旋转 rotate(deg)
transform-origin
可以调整元素转换变形的原点
倾斜 skew(deg, deg)
3D变形(CSS3) transform
rotate()有X,Y,Z三个属性

你可能感兴趣的:(H5C3过渡)