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

目录

一、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)

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

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)

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

skew ——倾斜

skew(,)为 2D 旋转,其参数值为角度,如 30deg 。
3D 旋转分为按 X、Y 轴旋转,对应的函数即skewX()与skewY()。

transform: skewX(-30deg)

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

效果图

CSS之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 与 translate 的同时使用

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

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

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

现对三者各添加 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);
}

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

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

叠加生效而非覆盖

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

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

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

参考

链接
MDN Web Docs - transform
CSS3 transform 属性
上一篇:MyBatisPlus 官方 + 狂神


下一篇:34.Python:装饰器