CSS3转换(transform)基本用法介绍

一个炫酷的网页离不开css的transform、transition、animation三个属性,之前一直没有涉及到这块内容,刚好最近要做一个相关东西,趁此机会好好学一学这三个属性。

一、功能

实现元素的平移、旋转、缩放或倾斜。

二、 实现条件

只能转换由盒模型定位的元素。

三、 基本语法

  1. transform: none
    不应用任何变换

  2. transform: <transform-function>
    应用一个或多个<transform-function>值,以空格分开

     <transform-function>是啥?
     它是css中的一种数据类型,用于对元素的显示做变换。包括二维变换和三维变换。
    

四、 实现方式

1. 变形原点

在介绍转换之前需要先介绍一下变形原点,即转换的基点。

(1) 语法

  • transform-origin:初始值为(50%, 50%, 0),即center。其属性值有:
    • 一个值:
      必须是<length>, <percentage>, 或 left, center, right, top, bottom关键字中的一个。如果是<length>, <percentage>则表示x-offset,如果是keyword则表示其应有的意思。(即left、right是横向的,top、bottom是纵向的,center是中间的)

    • 两个值:

      • 一个值是<length>, <percentage>, 或 left, center, right关键字中的一个。表示距离和模型左侧的偏移值(即x-offset或x-offset-keyword)
      • 另一个值是<length>, <percentage>, 或 top, center, bottom关键字中的一个。表示距离和模型顶部的偏移值(即y-offset或y-offset-keyword)
        • 如果第一个值是<length>, <percentage>, left, right,则表示x轴的偏移,另一个值必须是y-offset或y-offset-keyword(top、bottom)。
        • 如果第一个值是top,bottom,则表示y轴的偏移,另一个值可以是<length>, <percentage>或 left, right表示x轴的偏移。
        • 如果第二个值是left或right,则第二个值表示x轴的,那么第一个值可以是, <percentage>或 top, bottom表示y轴的偏移。
          (听起来好绕hhh,但其实不复杂,意思就是两个值对于x,y的顺序没有规定死,可以自定义,一个表示x轴,那另一个值必须得用y轴的。但如果俩都是值的话,那第一个是x,第二个是y)
    • 三个值:

      • 前两个值同只有两个值时的用法相同。
      • 第三个值必须得是<length>。表示Z轴偏移量。
    • PS:keyword与value的值对应关系如下:

      • left —— 0%
      • center —— 50%
      • right —— 100%
      • top —— 0%
      • bottom —— 100%

(2) 示例
CSS3转换(transform)基本用法介绍

2. 平移

(1) 语法

  • 二维:translate(tx, ty)
    参数:
    • tx: 要移动矢量的横坐标。
    • ty: 要移动矢量的纵坐标。可以不写,默认为0。
  • 三维:translate3d(tx, ty, tz)
    参数:
    • tx: 移动矢量的横坐标。
    • ty: 移动矢量的纵坐标。
    • tz: 移动矢量的z轴坐标。不能使用百分比,否则会被认为无效属性!
  • translateX(t)、translateY(t)、translateZ(t)
    不用多说了,分别是translate(tx, 0)、translate(0, ty)、translate3d(0, 0, tz)的简写形式。

(2) 示例

<div class="transform-div"></div>

.transform-div {
  width: 200px;
  height: 200px;
  background-color: orange;
  transform: translate(300px, 10%);
}

CSS3转换(transform)基本用法介绍

3. 旋转

(1) 语法

  • 二维: rotate(a)

    • 参数:表示旋转的角度。正角表示顺时针旋转,负角表示逆时针旋转。
  • 三维: rotate3d(x, y, z, a)

    • 效果:3D旋转,绕着固定轴旋转。旋转轴由[x,y,z]向量定义,且过原点(由transform-origin定义)。[x,y,z]向量需要标准化,即三个坐标平方和为1,但如果没有标准化也没事,因为它在内部会被标准化,但对于不能被标准化的向量,如空向量,会导致旋转不被应用,但不会影响整个CSS属性。
    • 参数:
      • x、y、z: 顾名思义,分别是旋转向量的x、y、z坐标,都为<number>
      • a: 旋转角度。正值表示顺时针,负值表示逆时针。
  • rotateX(a), rotateY(a), rotateZ(a):分别是rotate3D(1, 0, 0, a), rotate3D(0, 1, 0, a), rotate3D(0, 0, 1, a)的简写。

(2) 示例

<div class="container">
	<div class="line1"></div>
	<div class="line2"></div>
	<div class="transform-div"></div>
</div>

.container {
	width: 400px;
	height: 400px;
	border: 4px solid;
	position: relative;
}
.transform-div {
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -100px;
	margin-left: -100px;
	width: 200px;
	height: 200px;
	background-color: orange;
	transition: all 1s;
	transform: none;
	opacity: 0.7;
}

.transform-div:hover {
	transform: rotateY(-45deg);
}

.line1 {
	position: absolute;
	width: 100%;
	height: 50%;
	border-bottom: 2px solid;
}

.line2 {
	position: absolute;
	top: 0;
	height: 100%;
	width: 50%;
	border-right: 2px solid;
}

(截图看到的效果不是很清晰,可以复制上述代码看一下旋转效果)
CSS3转换(transform)基本用法介绍
CSS3转换(transform)基本用法介绍

4. 缩放

(1) 语法

  • 二维: scale(sx) 或 scale(sx, sy)

    • 效果:分别在x方向和在y方向放大or缩小一定的倍数,不同方向上的放大/缩小倍数可以不同。
    • 参数:
      • sx:缩放矢量的横坐标,为<number>值。
      • sy:缩放矢量的纵坐标,为<number>值。可以不存在,若不存在,则默认值与sx相同,即元素均匀缩放。
      • 值的大小在[-1,1]时,元素为缩放;大小在[-1,1]范围外时,为放大元素;当等于1时,什么都不做;当为负值时,执行点反射和大小修改。
  • 三维: scale3d(sx, sy, sz)

    • 参数:分别表示在横轴、纵轴、z轴的缩放大小。

5. 倾斜

(1) 语法

  • skew(ax) 或 skew(ax, ay)
    • 参数:ax、ay表示沿横、纵坐标扭曲元素的程度。是一个角度。
  • skewX(a)
    • 效果:水平拉伸,将元素每个点在水平方向上扭曲一定程度。
    • 参数:是一个角度,表示用于沿着横坐标扭曲元素的角度。
  • skewY(a)
    • 效果:垂直拉伸,将元素每个点在垂直方向上扭曲一定程度。
    • 参数:是一个角度,表示用于沿着纵坐标扭曲元素的角度。

(2) 示例
CSS3转换(transform)基本用法介绍

【补充】CSS角度单位:deg(度)、grad(梯度)、rad(弧度)、turn(圆、圈)
180deg = 200grad = 0.5turn = Π

6. 复合变换

  • 复合变换顺序:按从左到右的顺序。(这个顺序我自己没有很理解,我试了几个,只要没有旋转,无论顺序如何,得到的结果都是一样的,不懂原理,于是网上查了查,发现了这篇博客:https://www.cnblogs.com/xljzlw/p/4966798.html 值得参考。在旋转的时候,坐标系也会跟着旋转,所以旋转的顺序至关重要,如下示例:)

示例:
CSS3转换(transform)基本用法介绍

【解释】如上图所示,平移和旋转的顺序不同,得到的结果也不同。根本原因是,旋转时坐标系会跟着旋转。如下图:

CSS3转换(transform)基本用法介绍

CSS3转换(transform)基本用法介绍

【ps】只要不涉及旋转,那么顺序就无所谓,因为坐标系不会变。如果涉及到旋转,就要考虑顺序问题了,为了得到自己想要的效果,可以每次都把旋转放到最后。

【扩展】还可以直接在transform之后写变换矩阵:matrix()、matrix3d(),具体见文档。

上一篇:uni-app小程序优惠券镂空样式实现(完整代码!!!)


下一篇:Python2.7笔记——常用技术点汇总