「css基础」Transforms 属性在实际项目中如何应用？

最新推荐文章于 2024-12-05 19:41:11 发布

原创最新推荐文章于 2024-12-05 19:41:11 发布 · 356 阅读

2 ·

CC 4.0 BY-SA版权

本文通过五个实例演示如何在真实项目中应用CSS3的Transforms属性，包括内容垂直居中、对话框气泡、弹跳小球、转动线圈及翻转卡片。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

开篇

关于Transform变形属性大家都不陌生吧，可以通过此属性实现元素的位移translate(x,y)，缩放scale(x,y)，2d旋转rotate(angle)，3d旋转rotate3d(angle),倾斜变换skew(x-angle,y-angle)等，你也许已经很熟悉了这些属性，或许你也会有这样的困惑，这些属性在实际项目中如何应用呢？

今天的文章，笔者不会详细一一介绍相关属性，默许大家已经很熟悉了，今天只做例子，聊聊这些属性在实际项目中的应用。

本篇文章笔者将带着大家完成以下几个例子：

内容垂直居中
对话框气泡
弹跳的小球
转动的线圈（SVG）
翻转的卡片

本篇文章阅读时间预计15分钟。

内容垂直居中

在前端开发过程中，内容居中是常见的需求。其中，居中又可以分为水平居中和垂直居中。水平居中是比较容易的，直接设置元素的margin:0 auto 就可以实现。但是垂直居中相对来说是比较复杂一些的。实现的方法也比较多，比如flex布局，display:table等方法，今天笔者将通过使用Transform属性进行实现。

基本的页面布局和样式：

为了方便大家理解，我们先布局两个基本的文本框内容，html代码如下：

上述代码并不复杂，我们定义了两段内容长度不同的文本。接下来让我们为文本内容定义宽度，高度和边框，让我们更加直观展示文本内容在展示区域的位置，其css部分代码如下：

加上CSS代码后，我们完成了基本的页面布局和样式，页面的效果如下图：

使其垂直居中

接下来我们来实现文本垂直居中，有的同学可能想到了使用top属性，实现文本的垂直居中，代码可能是这样的：

运行后，页面的实际效果和我们预想不一致，如下图所示：

从上面的图中可以看出，文本框的实际效果，文本内容的内容并不是在中间而是在下半部分，并不是我们预想的垂直居中，你也许在想，如果我们把文本内容在往上提一半，正好能满足垂直居中的需求，Transform属性中正好有个平移的属性translate(x,y)，我们可以使用Transform让元素在y轴方向移动，样式代码修改如下：

正如我们所想，我们实现了内容的垂直居中，完成的效果如下：

细心的同学会注意到，元素的中心位置是在“半像素”这条线上，有可能显得模糊，我们可以添加perspective（视域）属性，让其更清楚，如下代码所示：

最终的代码

经过上面的步骤，我们最终完成了内容的垂直居中，最终的效果如下：

以下是最终的css代码，是不是很简单：

对话框气泡

微信想必大家天天用，我们是否注意到聊天界面里文本对话框气泡，右边或左边会凸出个小箭头指向聊天人的头像，这个例子就要实现类似微信对话框的气泡。

创建基本的页面布局

首先我们先创建一个基本的布局，代码如下：

html

css

完成以后，我们的页面效果如下：

添加气泡箭头

接下来我们来实现右箭头的气泡效果，贴着文本框我们在右边放置个空文本框，我们使用css的为元素属性 ::before 来实现，样式代码如下：

注：上述宽和高的属性，如果值越大，气泡的箭头就越大。

这个宽高1rem的正方形无内容的文本还在文本框内，我们还无法看到，我们需要将这个文本框右对齐，使其的一半内容露在外边，修改后的css代码如下：

完后的效果，我们的页面效果是这样的：

气泡箭头应该在内容中间区域的位置，接下来，移动这个小方块的位置，正好可以利用我们刚才学到垂直居中知识，css样式代码如下：

完成后的，这个小方块真的居中了，页面实际效果如下图所示：

从上图我们可以看出，为了实现向右小箭头三角的效果，我们只需要将方块旋转45度即可，修改后的css代码如下：

最终完成的代码

好了，我们的气泡效果完成了，效果如下：

最终完成的css代码如下：

弹跳的小球

接下来我们要完成一个常见的需求，比如我们通过API请求后台数据，上传图片等不能立返回结果，我们需要让用户在页面停留片刻，为了给用户良好的用户体验，我们一般都会有个正在加载中的动画进行提示，这个例子笔者将带着大家完成下面一个弹跳的小球，效果如下，是不是很酷：

640?wx_fmt=gif

首先我们先进行基本的静态布局

html部分：

css部分：

这样我们就完成了一个具有颜色渐变的静态的紫色小球，效果如下：

接下来声明动画名

如何让这个静态的小球动起来呢，我们需要借助css的动画属性，我们来定义一个名为jump的无限循环动画，先快后慢，然后反方向执行一遍动画，1.5s循环一次，代码如下：

然后完成动画的实现

怎么实现名为jump的动画？我们让小球在垂直方向跳动，我们可以使用translateY进行移动小球：

为了让小球有弹跳的空间，我们需要将小球距离顶部50px，css代码修改如下：

继续完善动画效果

为了让动画效果更加有趣，我们可以让小球边旋转边上升，动画部分修改如下：

接着我们让其更加自然，小球上升过程中，相对地面的观察者，弹的越高，就会感觉小球越小，接下来修改小球动画部分，使用scale属性来缩小球，代码如下：

最终完成的css代码

好了，这个效果我们就这样完成了，其完成后的css代码如下，是不是很简单？

转动的线圈（SVG）

这个例子，我们要实现一个更炫的加载提示器，这次我们要做的是基于SVG的动画效果，要理解这部分内容，你需要会svg相关的基础知识，具体的效果如下，感觉就像”头部“的那个东西在牵动线条转圈圈，是不是很酷：

首先进行基本的绘制

我们先用svg绘制一个基本的圈，示例的代码如下：

上述代码我们完成了以下内容：

我们定义了一个66×66的视口。
我们定义了一个半径为31px的圆。
对圆圈的填充我们使用了线性填充，分成了三段，实现了比较酷的渐变填充的线条效果。
接下来我们在圆圈上添加了一个小圆，让用户感觉这个线圈是这个小圆点牵着转动。

接下来我们来定义css部分，将画布定义成180*180，示例代码如下：

然后我们来定义线圈和实心的小圆的css属性：

上述代码有几个属性需要解释下：

fill: transparent 的效果就是让大圈圈的填充颜色为透明色，只留外边的描边，让人感觉是个圈圈的线条而已。
stroke-dasharray: 170 的意思就是用点线或虚线进行描边，由于长度没有超过圆的周长并且数值比较大，你看不到第二条点线或虚线，如果你个值比较小的话，这个线圈就是几条虚线绘制（你可以将值改成20体验下），其实我们显示的不是一个完整的圆圈，给人一种转成圆圈的线条感觉，其值代表线每条虚线的长度而已。
stroke-dashoffset: 表示偏移绘制起点的距离，其值越大，我们的线条越短。
通过stroke-dasharray，stroke-dashoffset这两个属性，让我们绘制了一个不完整的线圈。

注：关于stroke-dasharray，stroke-dashoffset的介绍建议大家看张鑫旭老师的这篇博文《纯CSS实现帅气的SVG路径描边动画效果》

https://www.zhangxinxu.com/wordpress/2014/04/animateion-line-drawing-svg-path-动画-路径/

通过上述代码，我们静态的线圈绘制好了，效果如下所示：

定义动画，让线圈转动起来

让线圈动起来，其实就是让其一直旋转360度而已，我们让其2秒转一圈，示例代码如下：

接下来让我的动画更加生动，我们让牵动线圈运动的小实心圆更有趣，感觉就像一个头部动力引擎，牵动着线条转动，我们让其倾斜摆动牵动，显得更加有趣，示例代码如下：

最终完成的代码

就这样我们实行了一个个酷酷的的，转动线圈的效果，完整的css代码如下：

翻转的卡片

这个动画效果也是我们常见的，类似一些网站的图片，我们鼠标悬停在上面，图片进行了翻转，就好像一个卡片，翻转到其背面，显示了背面的内容，实现后的效果如下所示：

静态页面布局

首先我们先完成图片卡片的基本布局，示例代码如下：

上述代码我们有三张图片，并且我们定义了图片背面的文字内容。

接下来我们来定义容器的样式，让三张图片在页面居中：

然后我们定义每张图片在容器中左浮动，排成一行，并定义图片的宽与高：

接着我们定义图片的填充方式为cover：

最后我们定义图片文字介绍的样式：

完成后的效果如下：

接着我们继续将文字介绍内容移到图片的顶部：

完成后的效果如下所示：

让文字到背面去

现在开始使用css的魔法属性，将图片放置到3D空间去，将其3d变换，给人一种透视的感觉，我们使用transform-style这个属性，示例代码如下：

然后修改side样式，定义文字内容为背面，且背面属性不可见，这里使用了css的backface-visibility属性：

然后定义back相关的样式，先让背面翻转过去，在y轴上旋转180度。

这样我们的文字描述部分在背面被隐藏了。

定义悬停动画

接下来，我们定义鼠标悬停翻转卡片的功能，示例代码如下：

为了让动画效果不这么生硬，我们需要增加过渡的动画属性，代码完善如下：

最终完成后的代码

好了，最后一个例子我们也完成了，是不是很有趣，最终完整的css代码如下：

友情提示

毫无疑问，CSS3为我们提供了强大的动画功能，甚至不需要任何JS我们就可以于创建有趣和美丽的动画效果。但是，重要的是要合理使用它们而不是滥用它们。请记住，您的网站是为用户而不是为自己服务的（在大多数情况下都是为用户而服务）。因此，应该利用CSS动画为用户提供更好的用户体验，而不是耍酷，用多了反而过犹不及。