CSS之transform介绍与动态LOGO的制作

目录

• 一、CSS transform 属性的介绍
• 二、transform 函数
  • translate ——平移
  • rotate ——旋转
  • scale ——缩放
  • skew ——倾斜
• 三、使用 transform 制作一个动态 LOGO
  • 效果图
  • 实现过程
• 四、使用 transform 的注意事项
  • 不要忘记原 transform 函数
  • rotate、scale、skew 与 translate 的同时使用
  • 叠加生效而非覆盖
• 参考

一、CSS transform 属性的介绍

通过修改CSS视觉格式化模型的坐标空间，CSS 的 transform 属性允许使用者平移，旋转，缩放或倾斜给定元素。
transform 属性可以指定为关键字值 none 或一至多个<transform-function>（transform 函数）值。


transform 属性指定为关键字值 none ：

transform: none

transform 属性指定为一至多个<transform-function>（transform 函数）值：

/* transform: <transform-function> */
transform: scale(0.6) translate(-.9em, .2em) rotateX(360deg);

二、transform 函数

在 CSS3 中，transform 函数包括：translate、rotate、scale、skew 与 matrix。

translate ——平移

平移分为 translateX()、translateY()、translateZ()，表示元素 X、Y、Z 轴的移动，也有2D移动的 translate(,) 可以同时指定 X 与 Y 轴的移动量，以及3D移动的 translate3d(,,) 可以同时指定三条轴的移动量。
平移量一般用长度来指定，如 10px 。也可以通过百分比来指定，其参考值是 transform 作用元素的尺寸。

transform: translate(20px, 30px)

translate 可以用于绝对定位下的元素居中。示例如下：

.wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    /* 
      此时元素左上角居中，故要将元素向左平移宽度的一半、向上平移高度的一半，才能使元素的中心居中；
      由于坐标系中，原点右侧为 X 轴正轴，原点下方为 Y 轴正轴，故此处取负值
    */
    transform: translate(-50%, -50%);
}

rotate ——旋转

rotate()为 2D 旋转，其参数值为角度，如 45deg ，默认为顺时针旋转，若角度取负数则反向旋转。
3D 旋转分为元素 X、Y、Z 轴的旋转，对应的函数即 rotateX()、rotateY()与rotateZ()。注意，外在表现形式是元素的旋转，但本质上是元素坐标轴的旋转。

transform: rotateX(45deg)

scale ——缩放

scale的参数值 n 为缩放的比例，n 为正数表示放大 n 被，n 为负数表示缩小至 |n| 倍，基数为 1 。
scale()定义 2D 缩放，scale3d(x,y,z)定义 3D 缩放。scaleX()、scaleY()、scaleZ()分别表示元在 X、Y、Z 轴的缩放——同样，外在表现形式是元素的缩放，但本质上是元素坐标轴的缩放。

transform: scale(2.0)

skew ——倾斜

skew(,)为 2D 旋转，其参数值为角度，如 30deg 。
也可分别指定元素 X、Y 轴的旋转，对应的函数即skewX()与skewY()。

transform: skewX(-30deg)

三、使用 transform 制作一个动态 LOGO

效果图

实现过程

外部wrapper（站牌的边框）居中显示。

.wrapper {
    background-color: rgb(155, 27, 27);
    background-clip: content-box;
    border: 30px double white;
    cursor: pointer;
    padding: 1%;
    /* 使用flex布局，操纵其子元素居中 */
    display: flex;
    justify-content: center;
    align-items: center;
    /* 该元素居中 */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%, -50%, 0);
}

wrapper（站牌）内有 5 个 strong 标签，从左到右依次包装了 9 3 / 4 Station 这个五个单词。

.wrapper strong {
    /* strong为行级元素，需要更改为块级元素，否则无动画效果 */
    display: inline-block;
    margin: .2em;
    font-size: 3em;
    color: whitesmoke;
    /* 因为后续要对这 5 个 strong 标签（即站牌上的文字）进行 transform，故此处添加 transition ，即过渡时间，让元素转变形态的过程能展现出来 */
    transition: 1s;
}

当鼠标移过外层 wrapper（站牌）时，这 5 个单词将发生变化。

.wrapper:hover strong:nth-of-type(1) {
    /* 9 放大至 1.4 倍，并向右移动，靠近 3 / 4 */
    transform: scale(1.4) translateX(.6em);
}
.wrapper:hover strong:nth-of-type(2) {
    /* 3 缩小并向右上方移动，移动至 / 之上，成为分子 */
    transform: scale(0.6) translate(.9em, -.6em);
}
.wrapper:hover strong:nth-of-type(3) {
    /* / 缩小并在 Y 轴上适当移动 */
    transform: scale(0.8) translateY(-.2em);
}
.wrapper:hover strong:nth-of-type(4) {
    /* 4 缩小并向左下方移动，移动至 / 之下，成为分母 */
    transform: scale(0.6) translate(-.9em, .2em);
}
.wrapper:hover strong:nth-of-type(5) {
    /* Station 绕 X 轴转动一圈 */
    transform: rotateX(360deg);
}

四、使用 transform 的注意事项

不要忘记原 transform 函数

Q：为某元素 hover 样式中添加 transform 效果后，原效果消失
A：在为元素的 hover 样式添加 transform 效果时，不要忘记把原效果加上
例如：

.wrapper {
    transform: translate(-50%, -50%)
}
.wrapper:hover {
    transform: translate(-50%, -50%) scaleX(2)
}

rotate、scale、skew 与 translate 的同时使用

以下以 rotate 与 translate 的同时使用为例。
Q：同时使用 rotate 与 translate 后，发现平移的效果与预期不同
A：rotate 在旋转元素时，会将坐标系一起旋转。以旋转 90 度为例，旋转后的 x 轴从原先的水平方向旋转为垂直方向。
例如：现有三个元素，施加 transform 之前叠加在一起。

.before {
    color: black;
}
.after1 {
    color: darkmagenta;
}
.after2 {
    color: gold;
}

现对三者各添加 transform 函数如下：

/* 元素 color 为黑色 */
.wrapper:hover .before {
    transform: rotate(90deg);
    z-index: -1;
}
/* 元素 color 为深紫红 */
.wrapper:hover .after1 {
    transform: translateX(100px) rotate(90deg);
}
/* 元素 color 为金色 */
.wrapper:hover .after2 {
    transform: rotate(90deg) translateX(100px);
}

以只旋转未平移的黑色元素作为参考点，可以观察到，深紫红的元素先平移后旋转，则相比黑色元素确实向左平移了 100px。这说明平移时元素的 x 轴依然是水平方向的。而金色元素虽同样使用了 translateX(100px) 函数，却是在垂直方向与参照点黑色相距 100px，水平上处于同一位置。由此可见，由于金色元素的平移发生在旋转之后，坐标系也发生了旋转，x 轴正轴从原先的水平向右，旋转了 90 度，变为了垂直向下。故金色元素最终垂直向下偏移了 100px 。
再举一个例子，若先使用 scale(2) 再使用 translate(100px) ，那结果是元素只会平移 50px 。

此处很重要的一个概念是，rotate、scale、skew 与 translate 作用于元素时，本质上改变的是其坐标轴，例如 rotate 会旋转坐标系，scale 会缩放坐标系。故混合使用时，尽量将 translate 置于前方，以免产生预期之外的效果。

叠加生效而非覆盖

应注意，上述提到的 translate、rotate、scale 等本质为函数。在同一个 transform 属性中同时使用多个相同函数时，会发生叠加效果，而不是后面的覆盖前面的。
例如：

{ transform: translateX(100px) translateX(-100px); }

则作用的元素最终不会发生任何偏移，因为先向 x 正方向平移了 100px ，又朝负方向平移了 100px ，则最终仍回到原位置。

参考

链接

MDN Web Docs - transform

CSS3 transform 属性

CSS 手册