02-transform变换

02-transform变换

1. 变换属性 transform

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

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

1.1. 2D变换

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

1.1.1 缩放 scale(x,y)

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

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

取值范围:

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

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

取值个数:

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

例子

<!-- css -->
<style>
    .box{
        width:500px;
        height:500px;
        background-color: #ccc;
        margin:50px auto;
    }
    .box p{
        width:100px;
        height:100px;
        background-color: red;
        transition:1s;

    }
    .box:hover p{
        transform:scale(-1);
    }

</style>

<!-- html -->
<div class="box">
    <p>ppppp</p>
</div>

1.1.2 位移 translate(x,y)

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

取值:

1. 一个值 默认代表X轴方向
2. 两个值 第一个值代表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%);
    width:100px;
    height:100px;
}

1.1.3 旋转 rotate(angle)

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

角度单位:

1. deg 角度
2. rad 弧度
3. turn 圈

transform:rotate(30deg);
/*沿着中心旋转30度*/

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


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

</style>

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

1.1.4 倾斜 skew(x,y)

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

值:

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

transform：skew（30deg）;
transform： skew（30px，30px）;

可分解为skewX()和skewY()

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

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

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

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

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

参数:

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

值:

1. 关键词: 默认center

   ​ top/left/right/bottom

2. 像素值 px 可以为负值。

3. 百分比值 % 可以为负值

参照background-position

transform-origin:left top; 
/*  讲变换基点改为左上角 */

注意

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

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

例子

<!-- css -->
<style>
    .box{
        width:500px;
        height:500px;
        background-color: #ccc;
        margin:50px auto;


    }
    .box p{
        width:100px;
        height:100px;
        background-color: red;
        transition:1s;
        transform-origin:left top;

    }
    .box:hover p{
        transform:scale(1.5);
    }

</style>

<!-- html-->
<div class="box">
    <p>ppppp</p>
</div>

1.1.6 Transform多值影响

多值的使用

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

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

多值的影响

1. transform:scale() translate()；与 transform: translate() scale(); 执行先后的区别，
2. 如果先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时，元素将会创建局部堆叠上下文。

属性值:

1. flat（默认） 指定子元素位于此元素所在平面内
2. 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轴位置(或者说基点)，在该位置观看者好像在观看该元素的子元素。

属性值：

1. 定义视图在x轴上的位置。默认值：50%。可能的参数值形式:left、center、right、length和%。
2. 定义视图在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 背面是否可见

属性值

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

1.2.5 3D旋转 rotate

绕某个轴旋转

1. rotateX() 水平方向为X轴，表现为上下转

2. rotateY() 竖直方向为Y轴，表现为左右转

3. rotateZ() 垂直屏幕为Z轴，表现为顺逆时针

4. rotate3d(x,y,z,angle)

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

   angle：是一个角度值，主要用来指定元素在3D空间旋转的角度，【deg】

1.2.6 缩放转换scale

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

1.2.7 位移

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

Z轴上的其他变换

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