CSS3 transform的常用属性总结

最新推荐文章于 2025-05-27 16:38:22 发布

原创

最新推荐文章于 2025-05-27 16:38:22 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#transform #css3 #前端

本文总结了CSS3的transform属性，包括translate()、rotate()、transform-origin、scale()、skew()以及matrix()的使用方法。通过实例演示了它们如何影响元素的位置、旋转、缩放和倾斜，详细解释了各个属性的参数和效果。了解这些属性可以帮助前端开发者实现更丰富的网页动态效果。

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

transform属性值：

一、transform: translate();

1、translate()函数可以将元素向指定的方向移动，类似于position中的relative。可以把元素从原来的位置移动，而不影响在X、Y轴上的任何Web组件。
2、translate()的括号内包含两个值，分别为相对于元素原有位置在水平方向和垂直方向的偏移值。
3、向下、向右为正方向
4、如果只想在x轴或者y轴上进行变换，那么属性为translateX(n)和translateY(n)

下面这段代码就是让一个盒子平移并对比不会影响其他的盒子能够真切的显示出translate()不会影响周围其他元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div{width: 100px;height: 100px;}
        div:nth-child(1) {background: #00ff00;transform: translate(0, 0);transition: transform 2s linear;}
        div:nth-child(2){background: #ff0000;}
        div:nth-child(1):hover {transform: translate(100px, 100px)}
    &