浅谈 transform 属性

掘金最后一个老实人
1,007 阅读4分钟

前言

transform、translate、transition 这三者很容易混淆，屏幕前的你，是否也是傻傻分不清？接下来，让我们一起揭开迷雾。

概念

首先我们对这三个属性做一个简单的介绍，搞清楚它们之间的区别：

  • transform是转换，用来改变给定元素的外观，改变外观的手段（转换函数）有旋转（rotate）、缩放（scale）、倾斜（skew）、平移（translate），其中平移的函数名就叫translate，可以理解为translate是transform的一部分。

  • transition是过渡，设置这个属性可以让CSS属性值在一定的时间区间内平滑地过渡，这种效果可以在鼠标点击、获得焦点等场景下触发，圆滑地以动画效果改变元素样式。

transition（过渡）

先了解一下基本用法：

transition: [属性名] [持续时间] [速度曲线] [延迟时间];

举个栗子：

.box {
    width: 200px;
    height: 200px;
    background-color: red;
    transition: width 1s ease 0.5s;
}

.box:hover {
    width: 400px;
}

上面这段代码的效果是，当鼠标 hover 到元素上时，该元素的宽度在延迟 0.5 秒之后以 ease 曲线过渡到 400px，过程持续 1 秒。 建议大家手动实现一下，验证效果的同时也可以加深印象。

transition属性就介绍到这里，不进一步展开了。下面有请主角出场：

transform（转换）

transform属性的值是转换函数，每个转换函数都会有不同的效果。

translate（平移）

translate(x, y)，作用是使元素进行位移，参数分别是水平方向上和垂直方向上的移动距离，可为负数。请看栗子：

// 将元素向右移动 10px，向下移动 20px
transform: translate(10px, 20px);

// 将元素向左移动 10px，向上移动 20px
transform: translate(-10px, -20px);

这种写法意味着只在水平方向上进行移动，垂直方向上不移动：

// 将元素向右移动 30px
transform: translate(30px);

rotate（旋转）

rotate(角度值)，作用是使元素进行旋转，参数为角度值，后面需要加上单位deg，旋转方向为顺时针方向。请看栗子：

// 将元素顺时针旋转 45 度
transform: rotate(45deg);

scale（缩放）

scale(倍率)，作用是使元素进行缩放，参数为缩放倍率。请看栗子：

// 缩小一半
transform: scale(0.5);

// 放大一倍
transform: scale(2);

也可以分别指定元素水平方向和垂直方向的缩放倍率：

// 水平方向放大一倍，垂直方向缩小一半
transform: scale(2, 0.5);

skew（倾斜）

skew(x, y)，作用是使元素进行倾斜，需要在参数中分别指定水平方向上的倾斜角度和垂直方向上的倾斜角度，倾斜方向为顺时针方向。请看栗子：

// 水平方向上倾斜 30 度，垂直方向上倾斜 30 度
transform: skew(30deg, 30deg);

还有一种写法：

// 意味着只在水平方向上进行倾斜，垂直方向上不倾斜
transform: skew(30deg);

对一个元素使用多种转换函数

🌰：

transform: translate(10px, 20px) rotate(45deg) scale(2);

上面代码的效果是，将元素向右移动 10px，向下移动 20px，顺时针旋转 45 度，放大一倍。注意：转换函数之间不用写逗号。

指定转换的基准点

在使用transform方法进行转换的时候，是以元素的中心点为基准点进行转换的，我们可以使用transform-origin属性改变转换的基准点：

transform: rotate(45deg);
// 将旋转的基准点修改为元素的左下角
transform-origin: left bottom;

基准点在元素水平方向上的位置：left、center、right

基准点在元素垂直方向上的位置：top、center、bottom

transform（3D转换）

前面的都属于2D转换，接下来我们看看3D转换如何实现。

1、translate（平移）

分别使用translateX方法、translateY方法、translateZ方法，使元素在X轴、Y轴、Z轴方向上进行移动，在参数中加入移动距离：

transform: translateX(-20px);
transform: translateY(20px);
transform: translateZ(20px);

2、rotate（旋转）

分别使用rotateX方法、rotateY方法、rotateZ方法使元素围绕X轴、Y轴、Z轴旋转，在参数中加入角度值，角度值后面跟单位deg，旋转方向为顺时针旋转：

transform: rotateX(45deg);
transform: rotateY(45deg);
transform: rotateZ(45deg);
transform: rotateX(45deg) rotateY(45deg) rotateZ(45deg);

3、scale（缩放）

分别使用scaleX方法、scaleY方法、scaleZ方法使元素按X轴、Y轴、Z轴进行缩放，在参数中指定缩放倍率：

transform: scaleX(0.5);
transform: scaleY(0.5);
transform: scaleZ(2);
transform: scaleX(2) scaleY(2);

4、skew（倾斜）

分别使用skewX方法、skewY方法使元素在X轴、Y轴上进行顺时针方向倾斜（无skewZ方法），在参数中指定倾斜的角度：

transform: skewX(45deg);
transform: skewY(45deg);

最后

如果文中有错误或者不足之处，欢迎大家在评论区指正。

你的点赞是对我莫大的鼓励！感谢阅读～

avatar
文章
阅读
粉丝