Transform(CSS动态属性的开始)

qianxiaona 2019-11-16

1、基本概念

基本概念:transform 属性向元素应用 2D 或 3D 转换;该属性允许我们对元素进行旋转、缩放、移动或倾斜。

这两点是Transform的概念和应用场景,重点在于2D和3D的转换,那么呢?2D和3D的转换是有一定的数学基础的,为什么这么说呢?我们需要了解两个概念

第一个:透视投影

从某一点发射出去的光线,是互不平行的,然后就会有一个近大远小的效果。比如:家里的灯泡,我们把一个东西离得灯泡越近,那么它的影子就越大,离得越远,影子就越小。

与之对应的:正交投影

正交投影的投影线垂直于投影平面,里面的光线是互相平行的;比如生活中的太阳发出的光都是平行光。

CSS的坐标系统:它的坐标系是一个左手坐标系,绿色的是x轴的方向也就是屏幕的方向,向右正方向;红色的是y轴,向下是正方向;蓝色是z轴,屏幕向外是正方向。(如下图所示)

Transform(CSS动态属性的开始)

CSS变换都是基于左手坐标系和透视投影。

常用属性主要有:Transform-origin(基准点),基于哪一个点来做变换,Transform-style(元素呈现方式2D还是3D),Rotate(旋转-度数),Scale(缩放-大小),Skew(倾斜-左右),Translate(移动-x/y轴),Perspective(透视)。

2、浏览器的兼容

  • 完全支持Transform第一个浏览器版本

Transform(CSS动态属性的开始)

  • 完全支持Transform-origin第一个浏览器版本

Transform(CSS动态属性的开始)

  • 完全支持Transform-style第一个浏览器版本

Transform(CSS动态属性的开始)

3、Rotate(旋转,分为2D旋转和3D旋转)

  • rotate(angle),2D旋转

    transform: rotate(45deg);
  • rotateX(angle),沿X轴3D旋转

    transform: rotate(45deg);
  • rotateY(angle) , 沿 Y 轴3D旋转

    transform: rotate(45deg);
  • rotateZ(angle) , 沿 Z 轴3D旋转

    transform: rotate(45deg);
  • rotate3d(x, y, z, angle) , 3D旋转;接收四个参数,x y z 介于0-1之间,确定三维空间唯一坐标点,angle围绕原点与x y z 坐标点连线的旋转角度。
    元素围绕着xyz在空间中确定的唯一坐标点和原点之间的连线旋转指定的角度,这就是rotate3D。

    transform: rotate3d(1,1,1,45deg);

4、Scale(缩放,同样分为2D缩放和3D缩放)

  • scale(x[, y]) ,2D 缩放

    transform: scale(2);
  • scaleX(x) , 沿 X 轴缩放

    transform: scaleX(2);
  • scaleY(y) , 沿 Y 轴缩放

    transform: scaleY(2);
  • scaleZ(z) , 沿 Z 轴缩放 - 单独使用时没有任何效果

    transform: scaleZ(2);
  • scale3d(x, y, z) , 定义每个方向上的缩放 , Z方向单独使用时没有任何效果

    transform: scale(2,2,2);

5、Skew(倾斜)

  • skewX(angle) - 沿 X 轴的 2D 倾斜

    transform: skewX(45deg);
  • skewY(angle) - 沿 Y 轴的 2D 倾斜

    transform: skewY(45deg);
  • skew(angle-x, angle-y) - 沿 X Y 轴的 2D 倾斜

    transform: skewY(45deg, 45deg);

6、Translate(移动)

  • translateX(x) , 沿 X 轴位移

    transform: translateX(20px);
  • translateY(y) , 沿 Y 轴位移

    transform: translateY(20px);
  • translateZ(z) , 沿 Z 轴位移,需要配合perspective属性一起使用

    transform: translateZ(20px);
  • translate(x, y) , 沿 X Y 轴位移

    transform: translate(20px,20px);
  • translate3d(x, y, z) , 沿 X Y Z 轴位移

    transform: translate(20px, 20px, 20px);

7、Perspective,定义的是视觉和元素在3D空间Z平面之间的距离

transform: perspective(200px);

8、Transform-origin(基准点)

在前面的例子里,旋转和倾斜都是基于中心位置,也就是基准点的默认值:50% 50% 0;Transform-origin接收三个参数,x-axis y-axis z-axis;

在x的方向上可以指定:left、center、right、length和%;在y轴的方向上可以指定:top、center、bottom、length和%;在y轴的方向上只可以指定:length。

transform-origin: x-axis y-axis z-axis;

9、Transform-style(三维空间的展现形式)

主要有两个值:float - 2D形式和preserve-3d - 3D形式。

本篇文章主要分享了Transform的基本概念,简要介绍了CSS3坐标系统与透视原理, 重点介绍了Transform常用的Rotate(旋转)、Scale(缩放)、Skew(倾斜)、Translate(移动)、Perspective(透视)属性。

相关推荐