你编写了 HTML，CSS 看起来也恰到好处，你的网页看起来很棒。但还是少了点什么。你想让自己的网站充满活力，让人眼前一亮。
这就是 CSS 变换的用武之地。
这项强大的功能可以让你移动、调整大小、旋转甚至倾斜页面上的元素。它就像一个小魔法，让你的设计充满互动和活力。
试想一下，当你将鼠标悬停在网站上时，你可能会看到倾斜的图片；当你将鼠标悬停在某物上时，你可能会看到放大效果；当你将鼠标悬停在某按钮上时，你可能会看到该按钮上的图标会移动。
这就是 CSS 变换在幕后的作用。
这个简单的属性可以彻底改变用户与网站的交互方式。在本指南中，我们将学习如何创建交互式视觉效果，让你的网站与众不同。
让我们深入了解！
了解 CSS 变换的基础知识
在学习 CSS 变换之前，你需要打下坚实的 CSS 基础。如果你还不了解 CSS，请查看我们关于学习 CSS 的博文。
现在，让我们直接进入 CSS 变换。CSS 变换可让你对元素进行可视化操作。
比如旋转、缩放、倾斜或移动。这些变化发生在二维或三维空间中，为你提供了极大的创作自由。
下面是为元素添加一个简单 CSS 变换的示意图：
这里：
element是要转换的元素的选择器。function(value)告诉你具体的变换和你想要的变换程度。
transform 属性支持多个函数，将它们组合起来可以创建复杂的二维和三维变换。
让我们来探索其中的一些，好吗？
探索二维 CSS 变换
CSS 变换非常酷，它可以让你操控元素在网页上的显示方式。想想看，这就像在现实生活中移动东西一样，只不过是用代码而已。下面，我们将介绍 CSS 中的一些二维变换。
旋转元素
使用 CSS 变换最常见的用途之一就是旋转。假设你有一个写着 Click Me 的按钮，或者你网站上的任何按钮。我们可以使用 CSS 中的 rotate 函数，让它变得更有趣一些。
比方说，你的网站上有一个 CTA 按钮：Click Me。下面是如何使用 rotate() 使其脱颖而出的方法：
.cta-button {
transition: transform 0.3s;
}
.cta-button:hover {
transform: rotate(-10deg);
}
那么，我们在这里做什么呢？
我们指定，当有人将鼠标悬停在按钮上时，按钮应旋转 -10 度。
0.3 秒的过渡时间规定了动画完成所需的时间。这样，用户就不会一下子就切换到旋转位置，而是需要一点时间来显示从正常状态到旋转状态的平滑过渡。
缩放元素
使用 scale() 函数，您可以在设计中创建深度感、强调感和视觉层次感。
比方说，您手头有一些客户评价，您想向网站访客展示这些评价。
现在，我们不想让它们平铺在页面上。通过 CSS 变换，当用户的光标悬停在这些推荐语上时，就能让它们跃然纸上。
.testimonial-card {
transition: transform 0.3s;
}
.testimonial-card:hover {
transform: scale(1.1);
}
我们在这里做什么？
- 首先，我们针对每个推荐容器。我们假定该类为
testimonial-card。 transition属性在 0.3 秒内平滑了缩放效果，因此感觉很自然。- 当用户将鼠标悬停在卡片上时，卡片会微妙地放大一点（原始大小的 1.05 倍）。
这一细微的变化抓住了用户的眼球，使特定的推荐语脱颖而出。这在页面上是一个微妙的差别，但肯定会引起注意。
倾斜元素
倾斜是一种变换，可让元素沿 X 轴或 Y 轴倾斜，从而产生运动感和动感。
特别是，skew() 变换提供了一种为网站元素引入动感和活力的方法。
考虑一下专门用于客户评价的部分。下面介绍如何使用 skew() 使其脱颖而出：
.testimonial {
transition: transform 0.3s;
}
.testimonial:hover {
transform: skewX(-10deg);
}
当用户将鼠标悬停在推荐语上时，它会沿着 X 轴微妙地倾斜 -10 度。
这种微小的倾斜是通过 CSS 变换属性中的 skewX() 函数实现的，既增加了视觉趣味性，又不会过分分散注意力。
您还会注意到，我们一直在添加过渡属性，指定动画完成的时间为 0.3 秒。
变换移动元素
网页设计中的平移是指在页面中移动元素。
你可以这样想：你在网格上定位元素，你可以沿 X、Y 或甚至 Z 轴移动它们，而无需改变或移动其他任何东西。
假设你的网站上有一个导航栏。当访客的光标停留在菜单项上时，你希望它能做出微妙的反应。
使用 translate( )，您就可以实现这一目标。让我们来看一些代码，以便更好地理解这一点：
.menu-item {
transition: transform 0.2s;
}
.menu-item:hover {
transform: translateX(10px);
}
我们在这里做的是应用一个简单的过渡效果。现在，当你将光标悬停在.menu-item 上时，它会平滑地向右移动 10 个像素。很酷吧？
翻译的美妙之处在于，它们不仅限于悬停效果。你可以用它们为网站元素创建炫酷的进出动画，当你在特定页面时移动与该页面相关的项目，等等。
三维 CSS 变换基础
我们现在熟悉的是上下左右移动，这是典型的 2D 移动。
不过，CSS 可以让你进入 3D 变换的世界，我们可以沿 Z 轴对元素进行操作。
那么，CSS 提供了哪些 3D 变换功能呢？
- 首先是旋转函数：
rotateX(angle)、rotateY(angle)和rotateZ(angle)。从这个角度来看，rotateZ就像我们旋转的车轮，rotateY就像翻动的书页，而rotateX就像翻转的硬币。它们分别控制绕各自轴线的旋转。 translateZ(z)可以沿 Z 轴平移或移动元素。正值会使元素靠得更近，而负值则会使元素靠得更远。可以把它想象成调整相机的变焦，对焦到不同的深度。- 使用
scaleZ(z) function可以沿 Z 轴缩放元素。这就好比沿着一条线拉伸或压缩一个元素。大于 1 的值会使元素看起来离你更近，而介于 0 和 1 之间的值则会使元素退到背景中。
要创建 3D 变换效果，需要在父元素上设置透视。透视属性决定了观察者与z=0 平面之间的距离，从而影响对 3D 变换的感知。
让我们再添加一些样式，如宽度、高度和背景颜色，以便从屏幕上观看时，过渡效果更加清晰：
.parent {
perspective: 500px;
width: 200px;
height: 200px;
margin: 100px auto;
}
.child {
width: 200px;
height: 200px;
background-color: blue;
transform: rotateY(45deg);
transition: transform 0.5s;
}
.child:hover {
transform: rotateY(0deg);
}
下面是 HTML 代码的样子：
<body> <div class="parent"> <div class="child"></div> </div> </body>
我们有两个 div：父 div 和子 div。父 div，即我们的舞台，透视设置为 500 像素。子代（红色正方形）最初使用 rotateY(45deg) 沿 Y 轴旋转 45 度。
悬停时，我们使用 transform: rotateY(0deg) 重置旋转，使其顺利返回到初始位置。
控制 CSS 变换原点
默认情况下，CSS 变换围绕元素的中心点进行。不过，你可以使用 transform-origin 属性改变原点。通过该属性，你可以指定围绕该点进行变换的 X、Y 和 Z 坐标。
transform-origin 属性的语法如下：
.element {
transform-origin: x-axis y-axis z-axis;
}
可以使用长度单位（如像素）、百分比或关键字（left, center, right, top, 或 bottom）指定 x-axis 和 y-axis。Z 轴值只适用于三维变换，并使用长度单位指定。
下面的示例演示了更改 transform-origin 对旋转的影响：
.box {
transform: rotate(45deg);
transform-origin: top left;
}
在这种情况下，元素将围绕其左上角而不是中心旋转 45 度。
transform-origin 属性可让你对如何应用变换进行精细控制，从而创建更精确、更具视觉吸引力的效果。
通过组合创建复杂的 CSS 变换效果
CSS 变换属性最强大的功能之一，就是可以将多个变换组合起来，创建复杂的视觉效果。通过将不同的变换功能连锁在一起，你可以释放自己的创造力，制作出独特而迷人的设计。
比方说，您的电子商务网站上有一个产品卡。当用户将鼠标悬停在该卡片上时，您希望它放大、轻微旋转，并以阴影效果从页面上移开：
.product-card {
transition: transform 0.3s, box-shadow 0.3s;
}
.product-card:hover {
transform: scale(1.05) rotate(5deg);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}
当用户将鼠标悬停在产品卡上时，产品卡会平滑地缩放至原始大小的 1.05 倍，旋转 5 度，并产生一个方框阴影，营造出一种升降效果。缩放、旋转和阴影的组合创造了一种动态和引人入胜的交互效果。
小结
你已经花了不少时间学习 CSS 变换：旋转、调整大小、倾斜和定位，这让你可以创建一些复杂的视觉效果。这项技能对于创建能在不同屏幕上正常运行的网站，以及让你的网站更具视觉吸引力，都非常有价值。
不过，你还可以用它做更多的事情。如果你有兴趣深入学习，可以研究一下这些领域：
- 使用 CSS 制作平滑的过渡和动画。
- 探索 3D 变换，为设计增加深度。
- 学习如何制作 SVG 图像动画，以获得更复杂的效果。
- 找到将变换与其他 CSS 属性相结合的创新方法。
- 学习 Tailwind CSS 和 Bootstrap CSS，让你的整个页面看起来更漂亮。
要想取得更好的成绩，最好的办法就是不断学习和尝试新事物。这样你才能发现可能的东西，并形成自己独特的风格。
评论留言