THELIUWEI

基础知识

坐标系统

要使用元素变形操作需要掌握坐标轴，然后通过改变不同坐标来控制和元素的变形。

x轴是水平轴
y轴是垂直轴
z轴是纵深轴

变形操作

使用transform规则控制元素的变形操作，包括控制移动、旋转、倾斜、3d转换等，

变形动作

选项	说明
none	定义不进行转换
translate(x,y)	定义2d转换
translate3d(x,y,z)	定义3d转换
translateX(x)	定义转换，只是用x轴的值
translateY(y)	定义转换，只是用y轴的值
translateZ(z)	定义3d转换，只是用z轴的值
scale(x,y)	定义2d缩放转换
scale3d(x,y,z)	定义3d缩放转换
scaleX(x)	通过设置x轴的值来定义缩放转换
scaleY(y)	通过设置y轴的值来定义缩放转换
scaleZ(z)	通过设置z轴的值来定义3d缩放转换
rotate(angle)	定义2d旋转，在参数重规定角度
rotate3d(x,y,z,angle)	定义3d旋转
rotateX(angle)	定义沿着x轴的3d旋转
rotateY(angle)	定义沿着y轴的3d旋转
rotateZ(angle)	定义沿着z轴的3d旋转
skew(x-angle,y-angle)	定义沿着x和y轴的2d倾斜转换
skewX(angle)	定义沿着x轴的2d倾斜转换
skewY(angle)	定义沿着y轴的2d倾斜转换
perspective(n)	为3d转换元素定义透视视图

变形叠加

重复设置变形操作时只在原形态上操作

默认处理

下面设置了两次移动，并不会移动550px而是只移动50px。

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            transform: translateX(500px);
            width: 100px;
            height: 100px;
            background-color: red;
        }
        div:nth-child(1){
            transform: translateX(50px);
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

伪类叠加

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            transition: 2s;
            transform: translateX(500px);
            width: 100px;
            height: 100px;
            background-color: red;
        }
        div:nth-child(1){
            transition: 5s;
            transform: translateX(100px);
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

行级元素

行级元素不产生变形效果，将其转为inline-block或block以及弹性元素都可以产生变化效果。

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            transition: 2s;
            transform: translateX(500px);
            width: 100px;
            height: 100px;
            background-color: red;
        }
        div:nth-child(1){
            transition: 5s;
            transform: translateX(100px);
        }
        span{
            display: inline-block;
            transition: 2s;
            transform: translateX(100px) translateX(50px);
            width: 100px;
            height: 100px;
            background-color: #ddd;
        }
        span:hover{
            transition: 2s;
            transform: translateX(100px);
        }
    </style>
</head>
<body>
    <div>
        <span>hello</span>
    </div>
</body>
</html>

伪类状态

:hover

鼠标移动上后发生改变。

:target

操作变化时间为0秒，通过掌握后面的过渡动画可以控制变化时间。

css

span:target{
	display: block;
	transform: translateY(150px);
}

移动元素

沿x轴移动时正值向右移动、负值向左移动
沿y轴移动时正值向下移动、负值向上移动
如果使用百分数将控制元素的原尺寸计算百分比然后移动
可同时设置多个值，解析器会从左向右依次执行
变形是在原基础上更改，即第二次设置值时不是在第一次值上变化

translateX

正值向右移动，负值向左移动

translateY

正值向下移动，负值向上移动

translate

使用translate可以控制按x,y同时移动操作，第一个值控制x移动，第二个值控制y移动。

css

transform:translate(100px, -100px);

百分比移动

元素宽度为100px设置50%将移动50px，即百分比是指元素的尺寸的百分比。

css

transform:translateX(50%);

元素居中

居中可以使用多种方式，如弹性布局、定位操作、下面来看使用移动操作居中。

css

transform:translate(-50%, -50%);

translateZ

控制z轴移动，正数向外、负数向里移动。因为z轴是透视轴没有像x/y一样的固定尺寸，所以不能使用百分数。

css

transform：translateZ(-100px);

translate3d

用于同时控制x、y、z轴的移动，三个值必须输入。如果某个轴不需要移动时写为零。

css

translate3d(50%,50%, 200px)

渐变表单

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width= , initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            padding: 0%;
            margin: 0%;
            box-sizing: border-box;
        }
        body{
            width: 100vw;
            height: 100vh;
            background-color: aliceblue;
        }
        main{
            position: relative;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%);
            width: 300px;
            height: 300px;
            background-color: aqua;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            justify-content: center;
            align-items: center;
        }
        .field{
            position: relative;
            overflow: hidden;
            margin-bottom: 20px;
        }
        .field::before{
            content:"";
            position:absolute;
            left:0;
            height: 2px;
            bottom: 0;
            width: 100%;
            background:linear-gradient(to right, white, #1a1a1a, #f1f1f1, white);
            transform: translateX(-100%);
            transition: 2s;
        }
        .field:hover::before{
            transform:translateX(100%);
        }
        .field input{
            border: none;
            outline: none;
            background: #efefef;
            padding: 10px;
        }
    </style>
</head>
<body>
    <main>
        <div class="field"><input type="text" placeholder="请输入账号"></div>
        <div class="field"><input type="text" placeholder="请输入密码"></div>
    </main>
</body>
</html>

缩放元素

比如数值为2时表示为原尺寸的两倍

scaleX

css

transform:scaleX(.5);

scaleY

沿着y轴缩放一半

css

transform:scaleY(.5);

scale

使用scale可以同时设置x、y轴的缩放，如果只设置一个值表示两个轴缩放相同。

css

transform:scale(5);
transform:scale(1,2);

scaleZ

沿z轴缩放元素，需要有3d透视才可以查看到效果。

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }
        body{
            width: 100vw;
            height: 100vh;
        }
        main{
            position: absolute;
            left:50%;
            top:50%;
            transform: translate(-50%,-50%);
            width: 400px;
            height: 400px;
            border: solid 5px silver;
            transform-style: preserve-3d;
            transform: perspective(900px) rotateY(45deg);
            transition: 3s;
        }
        div{
            position: absolute;
            left: 50%;
            top:50%;
            margin-left:-100px;
            margin-top:-100px;
            width:200px;
            height:300px;
        }
        div:nth-child(1){
            background: #2ecc71;
        }
        div:nth-child(2){
            background: #e67e22;
            transition: 1s;
            transform: translateZ(-300px);
        }
        body:hover main{
            transform: perspective(900px) rotateY(45deg) scaleZ(3);
        }
    </style>
</head>
<body>
    <main>
        <div></div>
        <div></div>
    </main>
</body>
</html>

scale3d

沿X/Y/Z三个轴绽放元素

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            padding:0;
            margin:0;
            box-sizing: border-box;
            list-style: none;
        }
        body{
            width: 100vw;
            height:100vh;
            background-color: antiquewhite;
        }
        main{
            position: absolute;
            left:50%;
            top:50%;
            width: 200px;
            height: 200px;
            transform-style: preserve-3d;
            transition: 2s;
            transform: perspective(900px) rotateY(60deg);
        }
        body:hover main{
            transform: perspective(600px) rotateY(60deg) scale3d(2, 2, 4);
        }
        div{
            position: absolute;
            top:0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: #f1c40f;
        }
        div .b{
            background: #8e44ad;
            transform:translateZ(-100px);
        }
    </style>
</head>
<body>
    <main><div></div>
    <div></div></main>
</body>
</html>

旋转操作

使用css可以控制元素按照不同坐标轴进行旋转。

rotate X

控制元素按照x轴进行旋转操作

基本使用

按水平轴旋转，如果旋转90deg将不可见。

css

article div:nth-child(2){
	transform:rotateX(180deg);
}

父级透视

当x旋转90度后无法看到元素、这时可以控制父级旋转从上看到子元素。

css

transform:perspective(900px) rotateX(90deg) rotateY(25deg) rotateZ(45deg)

rotateY

按垂直轴旋转，如果旋转90deg将不可见。

css

article div: nth-child(2){
    transform: rotateY(180deg);
}

rotateZ

沿Z轴旋转元素，效果就是沿X/Y轴的平面旋转。

css

transform:rotateZ(100deg);

rotate

在x轴和y轴平面旋转，效果与使用rotateZ相同

rotate3d

同时设置x/y/z轴的旋转向量值来控制元素的旋转。

需要同时设置如下四个参数

css

rotate3d(tx,ty,tz,angle)

倾斜操作

skewX

沿x轴倾斜元素

skewY

沿y轴倾斜元素

skewZ

沿z轴倾斜元素

skew

沿x/y轴倾斜元素

变形基点

使用transform-origin设置元素的X/Y/Z操作的基点，用于控制旋转、倾斜等操作。

旋转默认以元素中心进行旋转，改变基点后可控制旋转点位置
元素移动不受变形基点影响
基点是元素原始空间位置，而不是translate移动后的空间位置。

平面旋转

css

<style>
    * {
        padding: 0;
        margin: 0;
        box-sizing: border-box;
    }

    main {
        position: absolute;
        left: 50%;
        top: 50%;
        margin-left: -200px;
        margin-top: -200px;
        width: 400px;
        height: 400px;
        border: solid 5px silver;
    }

    div {
        position: absolute;
        left: 50%;
        top: 50%;
        margin-left: -100px;
        margin-top: -100px;
        width: 200px;
        height: 200px;
        transform-origin: right bottom;
    }

    div:nth-child(1) {
        background: #2ecc71;
    }

    div:nth-child(2) {
        background: #e67e22;
        transition: 1s;
    }

    main:hover div:nth-child(2) {
        transform: rotate(-45deg);
    }
</style>

<main>
    <div></div>
    <div></div>
</main>

倾斜控制

参考右上角控制倾斜

css

<style>
    * {
        padding: 0;
        margin: 0;
        box-sizing: border-box;
    }

    main {
        position: absolute;
        left: 50%;
        top: 50%;
        margin-left: -200px;
        margin-top: -200px;
        width: 400px;
        height: 400px;
        border: solid 5px silver;
    }

    div {
        position: absolute;
        left: 50%;
        top: 50%;
        margin-left: -100px;
        margin-top: -100px;
        width: 200px;
        height: 200px;
        transform-origin: top left;
    }

    div:nth-child(1) {
        background: #fff;
    }

    div:nth-child(2) {
        background: #e67e22;
        transition: 1s;
    }

    main:hover div:nth-child(2) {
        transform: skew(45deg);
    }
</style>

<main>
    <div></div>
    <div></div>
</main>

三维旋转

css

<style>
    * {
        padding: 0;
        margin: 0;
        box-sizing: border-box;
    }

    main {
        position: absolute;
        left: 50%;
        top: 50%;
        margin-left: -200px;
        margin-top: -200px;
        width: 400px;
        height: 400px;
        border: solid 5px silver;
        transform-style: preserve-3d;
        transform: perspective(900px) rotateY(95deg);
    }

    div {
        position: absolute;
        left: 50%;
        top: 50%;
        margin-left: -100px;
        margin-top: -100px;
        width: 200px;
        height: 200px;
        transform-origin: center center 200px;
    }

    div:nth-child(1) {
        background: #2ecc71;
    }

    div:nth-child(2) {
        background: #e67e22;
        transition: 1s;
    }

    main:hover div:nth-child(2) {
        transform: rotateY(360deg);
    }
</style>

<main>
    <div></div>
    <div></div>
</main>

变形顺序的影响

设置transform变形的前后顺序对变形结构是有影响的

先写rotate后写translate，即按原先位置transform-origin:top left进行旋转，再按照原位置的tranform-origin:top left进行移动。

css

<style>
  body {
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  article {
    width: 200px;
    height: 200px;
    border: solid 2px #ddd;
    position: relative;
    background: #34495e;
  }
  article div {
    width: 5px;
    height: 100px;
    background: #000;
    transition: 2s;
    position: absolute;
    transform-origin: top left;
    transform: rotate(0deg) translate(-50%, -50%);
    background-color: #f1c40f;
  }
  article::after {
    content: 'hello';
    width: 100%;
    color: #f3f3f3;
    font-size: 12px;
    position: absolute;
    bottom: 5px;
    text-align: center;
  }
  article:hover div {
    transform: rotate(360deg) translate(-50%, -50%);
  }
</style>

<article>
  <div></div>
</article>

现在交换rotate与translate的顺序后，表示先移动元素，这时候旋转就是参考移动后的位置的transform-origin:top left

css

<style>
  body {
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  article {
    width: 200px;
    height: 200px;
    border: solid 2px #ddd;
    position: relative;
    background: #34495e;
  }
  article div {
    width: 5px;
    height: 100px;
    background: #000;
    transition: 2s;
    position: absolute;
    transform-origin: top left;
    transform: translate(-50%, -50%) rotate(0deg);
    background-color: #f1c40f;
  }
  article::after {
    content: 'hello';
    width: 100%;
    color: #f3f3f3;
    font-size: 12px;
    position: absolute;
    bottom: 5px;
    text-align: center;
  }
  article:hover div {
    transform: translate(-50%, -50%) rotate(360deg);
  }
</style>

<article>
  <div></div>
</article>

透视景深

perspective

使用persepctive来控制元素的透视景深
persepctive规则为舞台元素控制景深，perspective属性为控制单个元素。

舞台透视

perspective规则用于将父级整个作为透视元素，会造成里面的每个子元素的透视是不一样的。

css

<style>
    article {
        margin: 0 auto;
        margin-top: 150px;
        width: 400px;
        height: 200px;
        position: relative;
        border: solid 5px silver;
        perspective: 200px;
    }

    article div {
        width: 100px;
        height: 100px;
        background: blueviolet;
        box-sizing: border-box;
        margin-right: 80px;
        float: left;
        transform: rotateY(60deg);
    }
</style>

<article>
	<div></div>
	<div></div>
</article>

单独透视

perspective函数用于为元素设置单独透视，下面是为元素单独设置透视参数，每个元素的透视效果是一样的。

css

article div {
    width: 100px;
    height: 100px;
    background: blueviolet;
    box-sizing: border-box;
    margin-right: 80px;
    float: left;
    transform: perspective(100px) rotateY(60deg);
}

3D透视

transform-style

使用transform-style用于控制3d透视。

应用于舞台即变形元素的父级元素

设置overflow:visible时preserve-3d才无效。

选项	说明
flat	2d平面舞台
preserve-3d	3d透视舞台

观看视角

perspective-origin

perspective-origin用于控制视线的落点，就像人的眼睛看物体时的聚焦点。可以理解眼睛看物体的位置。比如看一辆汽车，是在看车头左侧还是看车头右侧

需要设置perspective透视后才能看到效果，一般设置在舞台元素上控制子元素

位置参数

值	说明
x-axis	定义该视图在x轴上的位置。默认值：50%。可能的值：left、content、right、length、%
y-axis	定义该视图在y轴上的位置。默认值：50%。可能的值：top、center、bottom、length、%

隐藏背面

backface-visibility

使用 backface-visibility 用于控制是否可以看到元素的背面。

一般设置在元素上而不是舞台元素上
需要舞台元素（父级元素）设置 transform-style: preserve-3d

选项	说明
visible	背面可见
hidden	背面隐藏

​

基础知识 ​

坐标系统 ​

变形操作 ​

变形叠加 ​

默认处理 ​

伪类叠加 ​

行级元素 ​

伪类状态 ​

移动元素 ​

translateX ​

translateY ​

translate ​

百分比移动 ​

元素居中 ​

translateZ ​

translate3d ​

渐变表单 ​

缩放元素 ​

scaleX ​

scaleY ​

scale ​

scaleZ ​

scale3d ​

旋转操作 ​

rotate X ​

基本使用 ​

父级透视 ​

rotateY ​

rotateZ ​

rotate ​

rotate3d ​

倾斜操作 ​

skewX ​

skewY ​

skewZ ​

skew ​

变形基点 ​

平面旋转 ​

倾斜控制 ​

三维旋转 ​

变形顺序的影响 ​

透视景深 ​

perspective ​

舞台透视 ​

单独透视 ​

3D透视 ​

transform-style ​

观看视角 ​

perspective-origin ​

位置参数 ​

隐藏背面 ​

backface-visibility ​

基础知识

坐标系统

变形操作

变形叠加

默认处理

伪类叠加

行级元素

伪类状态

移动元素

translateX

translateY

translate

百分比移动

元素居中

translateZ

translate3d

渐变表单

缩放元素

scaleX

scaleY

scale

scaleZ

scale3d

旋转操作

rotate X

基本使用

父级透视

rotateY

rotateZ

rotate

rotate3d

倾斜操作

skewX

skewY

skewZ

skew

变形基点

平面旋转

倾斜控制

三维旋转

变形顺序的影响

透视景深

perspective

舞台透视

单独透视

3D透视

transform-style

观看视角

perspective-origin

位置参数

隐藏背面

backface-visibility