translateX 和 translateY 可以利用负数和百分数translateZ 表示纵深，只能写详细的数值小技巧掌握元素居中

position:absolute;left:50%;top:50%;/margin-left:-100px;margin-top:-100px;/transform:translate(-50%,-50%);width:300px;height:300px;rotate3d 按向量值掌握旋转transform 的参数叠加与顺序对变形有不同的结果 参数不会叠加，只会发生覆盖顺序的不同，结果呈现也不同

transform-origin

变形参考点，设置元素的 X/YZ 操作的基点，用于掌握旋转、倾斜等操作

旋转默认以元素中央进行旋转，改变基点后可掌握旋转点位置元素移动不受变形基点所影响

属性值为：top、bottom、left、right、center 或者是 百分数 | 详细数值默认值: center center

html页面变形CSS3 变形与透视让你的页面更活泼 Angular

transform-origin:leftcenter300px;

perspective

掌握元素的透视深度

perspective(900px) 作为函数规则掌握单个元素，每个元素的透视效果是一样的perspective: 900px 作为规则用于将父级全体做为透视元素，会造成里面的每个子元素的透视是不一样的。
就像现实中摆一排杯子，是利用统一透视的，每个杯子的透视不一样，造成有大有小

推举设置作为函数设置，规避透视造成元素大小不一致：transform: perspective(600px);

preserve-3d

三维空间视角，对元素设置 Z轴 效果时须要呈现三维空间效果

transform-style:preserve-3d;

perspective-origin

掌握视线的角度，就像我们眼睛看物体时的聚焦点须要设置 perspective 规则才能看到效果

backface-visibility

掌握是否可以看到元素的背面

一样平常设置在元素上而不是父级元素上须要父级元素设置 transform-style: preserve-3d

可选属性：

visible 背面可见hidden 背面隐蔽

一些常见的案例

立体按钮

3D 视图切换

背面卡片

输入框殊效

贺卡效果

按钮效果

立方体翻转