Web前端学习整理(十二)

变换

用于操作元素的变换,平移,旋转,倾斜,缩放等相关操作

-不会脱离文档流,并且保持元素初始位置

-变化的过程中元素相关内容也会同步变换

平移变换

transform:translate(x,y);

表示横向和纵向分别变换x和y

translateX() 元素水平平移

translateY() 元素垂直平移

translateZ() 元素z轴平移

旋转元素

transform:rotate(deg);

表示以z为轴顺时针旋转

元素默认以z轴旋转

rotateX()

rotateY()

rotateZ()

倾斜元素

transform:skew(x,y);

此外:

skewX()

skewY()

缩放元素

transform:scale(w,h);

w表示宽放大倍数

h表示高放大倍数

默认值都为1

同理:

scaleX()

scaleY()

设置变换远点

变换的操作的基准点,设置不同变换效果会略有不同

transform-origin 设置元素变换中心

        -center left right top bottom

        -%,px

2D转3D效果

3D效果自己通过变换设计,在3D效果的父元素设置:

perspective:距离;

表示从父元素观察子元素位置,一般在800px~1000px.

同时可以使用transform-style:preserve-3d;设置透视辅助制作3D效果