2.5 CSS 元素变换

元素变换"/>

2.5 CSS 元素变换

2D变换：transform

• 1.1 位移： translate

• • translate：一个值代表水平方向，两个值代表:水平和垂直方向。
  • translateX：设置水平方向位移，需指定长度值;若指定的是百分比，是参考自身宽度的百分比。
  • translateY：设置垂直方向位移，需指定长度值;若指定的是百分比，是参考自身高度的百分比。
  • 注意：

• • • 位移与相对定位很相似，都不脱离文档流，不会影响到其它元素。
    • 与相对定位的区别:相对定位的百分比值，参考的是其父元素;位移的百分比值，参考的是其自身。
    • 浏览器针对位移有优化，与定位相比，浏览器处理位移的效率更高。
    • transform可以链式编写：transform: translateX(38px) translateY ( 40px);
    • 位移对行内元素无效。
    • 位移配合定位，可实现元素水平垂直居中

.box {position: absolute;left : 50%;top: 58%;transform: translate( -50%，-58%);
)

• 1.2 缩放：

• • • scale：同时设置水平方向、垂直方向的缩放比例，一个值代表同时设置水平和垂直缩放;两个值分别代表:水平缩放、垂直缩放。
    • scaleX：设置水平方向的缩放比例，值为一个数字，1表示不缩放，大于1放大，小于1缩小。
    • scalaY：设置垂直方向的缩放比例，值为一个数字，1表示不缩放，大于1放大，小于1缩小。
    • 注意：

• • • • scale的值,是支持写负数的,但几乎不用，因为容易让人产生误解。
      • 不能操作行内元素。
      • 借助缩放,可实现小于12px的文字。

• 1.3 旋转：rotate

• • rotate：设置旋转角度，需指定一个角度值( deg )，正值顺时针，负值逆时针。rotate一个值的时候相当于roateZ
  • 旋转会改变坐标系的轴(随旋转角度变化)

• 1.4 扭曲：skew

• • skew：一个值代表skewX，两个值分别代表:skewX.skewY
  • skewX：设置元素在水平方向扭曲，值为角度值，会将元素的左上角、右下角拉扯。
  • skewY：设置元素在垂直方向扭曲，值为角度值，会将元素的左上角、右下角拉扯。

• 1.5 变换原点：

• • transform-origin属性：

• • • transform-origin: 50% 50%，变换原点在元素的中心位置，百分比是相对于自身。--默认值
    • transform-origin : left top，变换原点在元素的左上角。
    • transform-origin: 50px 50px，变换原点距离元素左上角50px 50px的位置。
    • transform-origin : 0，只写一个值的时候，第二个值默认为50%。
    • 注意：

• • • • 修改变换原点对位移没有影响，对旋转和缩放会产生影响。
      • 如果提供两个值,第一个用于横坐标，第二个用于纵坐标。
      • 如果只提供一个，若是像素值，表示横坐标，纵坐标取50%;若是关键词，则另一个坐标取50%

• 1.6 多重变换：

• • 多重变换时最好先位移，最后旋转

3D变换

元素进行3D变换的首要操作:父元素必须开启3D空间与景深

• 空间：transform-style

• • flat : 让子元素位于此元素的二维平面内(默认值)
  • preserve-3d:让子元素位于此元素的三维空间内(3D空间)

• 景深：perspective 属性

• • none :不指定透视――(默认值)
  • 长度值︰指定观察者与“z=0”平面的距离,不允许负值。

• 透视点位置：perspective-origin 属性

• • 透视点位置就是观察者的位置;默认的透视点在元素的中心。在父元素中设置观察者位置，通常情况下，我们不需要调整透视点位置。
  • perspective-origin : 488px 308px； 相对坐标轴往右偏移488px，往下偏移308px

• 位移

• • 3D位移是在2D位移的基础上，可以让元素沿z轴位移
  • transform属性：

• • • translateZ：设置z轴位移，需指定长度值，正值向屏幕外，负值向屏幕里，且不能写百分比。
    • translate3d：第1个参数对应x轴，第2个参数对应y轴，第3个参数对应z轴，且均不能省略。

• 旋转：改变坐标系

• • 3D旋转是在2D旋转的基础上，可以让元素沿x轴和y轴旋转
  • transform属性：

• • • rotateX：设置X轴旋转角度，需指定一个角度值( deg )，面对x轴正方向:正值顺时针，负值逆时针。
    • rotateY：设置y轴旋转角度，需指定一个角度值( deg )，面对y轴正方向:正值顺时针，负值逆时针。
    • rotate3d：前3个参数分别表示坐标轴: ×,y ,z，第4个参数表示旋转的角度，参数不允许省略。例如: transform: rotate3d(1,1,1,30deg)，意思是: ×.y、z分别旋转30度。

• 缩放

• • 3D缩放是在2D缩放的基础上，可以让元素沿z轴缩放，具体使用方式如下:
  • transform属性：

• • • scaleZ：设置z轴方向的缩放比例，值为一个数字，1表示不缩放，大于1放大，小于1缩小。
    • scale3d：第1个参数对应x轴，第2个参数对应y轴，第3个参数对应z轴，参数不允许省略。

• 多重变换

• • 多重变换时，建议最后旋转：transform : translatez( 188px) scalez(3) rotateY ( 48deg)；

• 背部可见性

• • 旋转到背部时，可以看到正面的镜像，使用 backface-visibility: hidden; 设置背部不可见。