单词。

1. 前：front
2. 后：back
3. 左：left
4. 右：right
5. 顶：top
6. 底：bottom

如何让一个div水平垂直居中

方法①：使用定位＋translate() | +calc()

方法②：使用弹性盒模型

父元素{
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
        }

方法③：外边距自动获取

父元素{
    height:100vh
}
.box{
    margin:auto;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

方法④：使用网格

transform属性

translate()

定义：移动变换

语法：

translate( )
translate3d( )
translateX( )
translateY( )
translateZ( )

参数值

• 单位：数值型是任意长度值：px % em rem vh vw
  • translateZ(50%)/无效，因为div没有厚度/
• 数量：属性值数量由函数确定：1 - 3个
• 数量：多个属性值，使用逗号隔开
• 方向：
  • X：正值向右，负值向左
  • Y：正值向下，负值向上
  • Z：正值向前，负值向后
• 等价：translate(200px)等价于translateX(200px)

scale()函数

定义：用于对元素进行缩放变换

语法

scale( )
scale3d( )
scaleX( )
scaleY( )
scaleZ( )

参数值

• 数量：由函数决定：1 - 3个属性值
• 类型：没有单位的数值。数值表示缩放系数。
• 范围：[-1,1]和[1,正无穷]
  • 1无效果
  • 0.5表示缩小一半
  • -0.5等于0.5
  • 2表示放大2倍
• 等价：scale(2)效果同scaleX(2)
  • scale(.5,2) /X轴缩小一半，Y轴放大2倍/

rotate( )

定义：用于对元素进行旋转变换

语法

rotate( )
rotate3d( 1,1,1,45deg )
rotateX( )
rotateY( )
rotateZ( )

参数值

• 等价：rotate(30deg)效果同rotateX(30deg)
• 30deg：属性值是角度值。deg表示角度单位
• 数量：由函数决定。1 - 4个
• rotate3d(x,y,z,deg) ： x,y,z分别代码水平，垂直，纵轴的旋转方向，取值范围0 - 1

skew()

定义：用于对元素进行斜切变换

用法：

skew( )
skewX( )
skewY( )

参数值

• 参数是角度值。deg表示角度单位
  • 正值：向左
  • 负值：向右
• 参数数量由函数决定： 1 - 2

transform-origin

定义：用于设置元素的变换中心点

语法

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

属性值：

默认值：transform-origin：center center;

三个值

x：可以是任意长度值 | 关键词。表示x轴的偏移

y：可以是任意长度值 | 关键词。表示y轴的偏移

z：可以是任意长度值 | 关键词。表示z轴的偏移

两个值

• 如果只设置一个值，那么第二只默认center

transform-style

定义：用于设置父元素是2d还是3d模式

语法

transform-style:flat;
transform-style:preverse-3d;

属性值：

• flat：开启2d平面空间
• preserve-3d：开启立体空间

perspective

定义：是否开启透视 | 是否设置景深。 | 解释：perspective指定的是z轴原点到屏幕的距离。

语法

perspective:none;
perspective:长度值

属性值

• none：不设置景深
• 长度值：任何长度值都可以用来设置景深
  • 大景深 小变换：在相同的变换参数下，perspective值越大，变换效果越微弱。
  • 小景深 大变换：在相同的变换参数下，perspective值越小，变换效果越强烈。

perspective-origin

定义：设置观察者的位置。（设置消失点的位置）

语法

/*One-value syntax*/
perspective-origin:x-position;
/*Tow-value syntax*/
perspective-origin:x-position y-position;

属性值：

数量:x-position:表示水平位置y-position: 表示垂直位置
属性值类型
长度值: % vh vw em rem px
关键词: left bottom|top|right| center
注:可以设置左上，右上，左下，右下，中上，中下等组合视角。