transform变换

2022-04-11 本文已影响0人心存美好

transform变换

1. 变换属性 transform

变换分为2D变换和3D变换,描述的是一种变化之后的结果

允许我们对元素进行旋转、缩放、移动或倾斜。

1.1. 2D变换

transform:rotate() skew() scale() translate();

1.1.1 缩放 scale(x,y)

整体缩放缩放到原来的多少倍

取值:[正数 | 小数 | 0 | 负数]

取值范围:

大于0小于1 是缩小
大于1是放大
可以有两个值，水平方向竖直方向
可以有负数，反向缩放

transform:scale(0.8); 
/* 缩小到0.8倍 */

取值个数:

一个值既代表X轴，也代表Y轴
两个值第一个代表X轴，第二个代表Y轴，逗号隔开

例子

  <style>
    * {
      padding: 0;
      margin: 0;
    }

    .box {
      width: 300px;
      height: 300px;
      background-color: #ccc;
      margin: 50px auto;
    }

    .box p {
      width: 100px;
      height: 100px;
      background-color: red;
      transition: 1s;
      /*过渡的效果 */
    }

    .box:hover p {
      transform: scale(-2);
      /*transform: scale(.5,2);*/ /*两个值*/
      /* 2D变换 缩放*/
    }
  </style>
</head>

<body>
  <div class="box">
    <p>我会变</p>
  </div>
</body>

可单独拆分为scaleY()和scaleX()

transform: scaleX(.5)

1.1.2 位移 translate(x,y)

定义在 X轴Y轴的移动,向右向下为正。

取值:

一个值默认代表X轴方向
两个值第一个值代表X轴方向，第二个值代表Y轴方向

transform：translate(100px);
transform: translate(50px,50px);

可单独拆分为translateX()和translateY()

transform：translateX（100px）;    
/*  代表X轴方向  */
transform：translateY（100px）;    
/*  代表Y轴方向  */

例子

修改上例中hover之后p标签的样式

.box:hover p{
    transform:translate(100px,150px);
}

居中方式的改进：translate(-50%,-50%)

/* 当前盒子宽高的百分比，相对于当前元素本身*/

.child{
    position: absolute;
    left:50%;
    top:50%;
    transform: translate(-50%,-50%);  /*保证元素的居中，省去之前的margin*/
    width:100px;
    height:100px;
}

1.1.3 旋转 rotate(angle)

旋转,正直为顺时针,负值为逆时针

角度单位:

deg 角度 360deg
rad 弧度 1.57rad
turn 圈 1turn

transform:rotate(30deg);
/*沿着中心旋转30度,默认绕着Z轴旋转。X轴rotateX(30deg)  Y轴rotateY(30deg)  箭头方向顺时针是正值 逆时针是负值*/

<!-- css -->
<style>
    .box{
        width:100px;
        height:100px;
        background-color: red;
        transition:1s;


    }
    .box:hover{
        transform:rotate(1turn);
       /*transform: rotate(1.57rad); 弧度写法*/ 
       /*transform: rotate(1turn); 圈写法*/ 
    }

</style>

<!-- html -->
<div class="box">
    hello
</div>

X轴 Y轴 Z轴综合写法

transform: rotateX(80deg) rotateY(60deg) rotateZ(60deg);  /*不是真正的3D*/

1.1.4 倾斜 skew(x,y)

定义沿着 X 和 Y 轴的 2D 倾斜转换。（单位deg）

值:

一个值表示水平方向的倾斜角度
两个值第一个值代表X轴方向，第二个值代表Y轴方向（逗号隔开）
可支持负值

transform：skew（30deg）;  /*x轴倾斜30deg*/
transform： skew（0，30px）;
transform： skew（30px，30px）;

控制台调节数值时：滚轮按住shift使用每次增10；按住ctrl每次增减100

可分解为skewX()和skewY()

skewX(angle) 沿着 X 轴的 2D 倾斜转换。
skewY(angle) 沿着 Y 轴的 2D 倾斜转换。

transform： skewX （30deg）;   
/*  代表X轴方向  */
transform： skewY （30deg）;   
/*  代表Y轴方向  */

1.1.5 变换基点 transform-origin(x,y,z)

默认基点为中心点[50%,50%]，效果等同于center center

可以通过设置坐标值或关键词改变基点

参数:

X :定义基点被置于 X 轴的何处。
Y :定义基点被置于Y 轴的何处。
Z :定义基点被置于Z轴的何处(3D环境才有)。

值:

关键词: 默认center

top/left/right/bottom
像素值 px 可以为负值。
百分比值 % 可以为负值

参照background-position

    .box p {
      width: 100px;
      height: 100px;
      background-color: red;
      transition: 1s;
      /*过渡的效果 */
      transform-origin: left top; /*将变换基点改为左上角 写在原来的元素上，和过渡效果写一起*/

    }

    .box:hover p {
      transform: rotate(1rad);
    }

注意

如果设置两个，第一个为X轴，第二个为Y轴（两值以空格隔开）

如果设置一个，该值为X轴，第二个默认Y轴50%（给定值时）

1.1.6 Transform多值影响

多值的使用

transform 属性可以一次设置多个变换值, 以空格隔开

transform:translate(100px) scale(0.5);

多值的影响

transform:scale() translate()；与 transform: translate() scale(); 执行先后的区别，
如果先scale则后面的translate会受到受scale影响

transform:translate(100px) scale(0.5);/* 推荐先位移，缩放scale写在后面 */
transform:scale(0.5) translate(100px);

1.2. `3D`变换

1.2.1 设置`3D`环境 transform-style

设置给父元素,建立3D空间

定义：指定子元素定位在三维空间内，当该属性值为preserve-3d时，元素将会创建局部堆叠上下文。

属性值:

flat（默认）指定子元素位于此元素所在平面内
preserve-3d 创建3D环境

1.2.2 设置景深 perspective

给父元素添加,视镜查看 3D 元素的距离(none | length)

属性值：

一般使用看起来最适应800px或者 1200px

1.2.3 perspective-origin 透视点X Y轴的位置

perspective-origin属性是3D变形中另一个重要属性，主要用来决定perspective属性的源点角度。它实际上设置了X轴和Y轴位置(或者说基点)，在该位置观看者好像在观看该元素的子元素。

属性值：

定义视图在x轴上的位置。默认值：50%。可能的参数值形式:left、center、right、length和%。
定义视图在y轴上的位置。默认值：50%。可能的参数值形式:top、center、bottom、length和%。

<!--css -->
<style>
    *{margin:0;padding:0;}
    .box{
        width:1000px;
        height:500px;
        background-color: #eee;
        margin: 50px auto;
        perspective:800px; /*视镜：观看的距离*/
        perspective-origin:center top;

    }
    .box ul{

        transform-style:preserve-3d;/*打造3D空间，舞台*/
        border:1px solid green; 
    }
    .box ul li{
        list-style:none;
        width:200px;
        height:200px;
        background-color: red;
        transform:rotateX(30deg);
    }


</style>

<div class="box">
    <ul>
        <li>hello</li>

    </ul>   
</div>

1.2.4 backface-visibility 背面是否可见

属性值

visible（默认）：指定元素背面可见
hidden：指定元素背面不可见

1.2.5 3D旋转 rotate

绕某个轴旋转

rotateX() 水平方向为X轴，表现为上下转
rotateY() 竖直方向为Y轴，表现为左右转
rotateZ() 垂直屏幕为Z轴，表现为顺逆时针
rotate3d(x,y,z,angle)

x y z ，是表示你是否希望沿着该轴旋转，是为1，不是为0

angle：是一个角度值，主要用来指定元素在3D空间旋转的角度，【deg】
```
 transform:rotate3d(1,1,0,30deg);
```

1.2.6 缩放转换scale

scaleX(x) 通过设置 X 轴的值来定义缩放转换。
scaleY(y) 通过设置 Y 轴的值来定义缩放转换。
scaleZ(z) 通过设置 Z 轴的值来定义 3D 缩放转换。需和变换函数配合使用，才能看到效果,scaleZ要写在前面
scale3d(x,y,z) x,y,z 均为【正数 | 小数 | 零 | 负数】

1.2.7 位移

translateX(x) 定义位移，只是用 X 轴的值。
translateY(y) 定义位移，只是用 Y 轴的值。
translateZ(z) 定义 3D 位移，只是用 Z 轴的值。正值往前，负值往后
translate3d(x,y,z)

      transform:translateZ(-2000px);  正值往前越来越近放大，负值往后越来越远缩小

Z轴上的其他变换

在Z轴方向上的缩放 scaleZ()
在Z轴方向上的位移 translateZ()

transform变换