这次依旧任性,依旧粗鲁的介绍变形,说一些基本的,我们最多用到的变形。也是看完后的一个笔记总结。
变形长这个样子:transform:
transform-origin: 这个是用来定义元素的中心位置,以后的一切关于变形的方式都是以这个中心为准则。当然也有关键字如top left right bottom,也可以用特定的值来定位。 (eg: transform-origin:left bottom -50px)
transform-style: flat(default) / preserve-3d 所有的变形是基于2D空间还是3D空间,默认情况下是基于2D空间下处理形式。
perspective: 设定查看者的位置,视觉pos,用户和元素3D空间Z平面的距离。两种使用方式:perspective()函数和perspective属性,函数用在变形元素本身上,属性用在变形舞台上,即变形元素的父元素上。
perspective-origin: 视觉的角度 关键字top left right bottom
backface-visibility: hidden | visible 很好理解 是否显示变形的背景,尤其在旋转的时候可以显现作用,或者制作一个立方体 透明或实体
translateX|Y|Z :位移
scale:变形
rotate:旋转
skew:倾斜
标红的比较实用在h5中实现一些效果,其他的一些变形基本都很简单好理解