CSS之2D转换(transform)_css translate 坐标默认原点-CSDN博客

本文链接：https://blog.csdn.net/dwjdj/article/details/104103260

本文详细介绍了CSS中的2D转换技术，包括元素的平移、旋转、缩放和倾斜操作，以及如何改变变换的基点，帮助开发者实现更丰富的网页动态效果。

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

平移

transform:translate(水平方向移动的距离，垂直方向移动的距离)
如果省略了第二个参数，默认为0
在使用translate()方法移动元素时，基点默认为元素中心点，然后根据指定的X坐标和Y坐标进行平移
transform: translate(400px,200px);
总结：
◆如果在translate()中设置一个值，那么代表当前元素是沿着水平方向移动，如果是正数则向右移动，反之向左移动。
◆如果在translate()中设置两个值，第一个值代表水平方向移动，第二个值代表垂直方向移动。
◆translate()中可以设置百分比，百分比是相对元素自己的宽度或者高度

应用：绝对定位的盒子居中显示

```java
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .one{
            width: 400px;
            height: 400px;
            background-color: red;
            position: relative;
        }
        .two{
            width: 100px;
            height: 100px;
            background-color: blue;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translateX(-50%) translateY(-50%);
            /*transform: translate(-50%);*/
            /*margin-left: -50px;*/
        }
    </style>
</head>
<body>
<div class="one">
    <div class="two">

    </div>
</div>
</body>
</html>

在这里插入图片描述

旋转

transform:rotate(angle);
总结：
1.如果设置的是一个正数，那么代表当前元素按照顺时针方向旋转，反之逆时针
2.如果一个元素需要设置多个变形效果，可以使用空格把多个变形属性值隔开
transform:translate(30px) rotate(20deg);

缩放

transform:scale(x,y);
总结：
1.正数用来放大元素，小数用来缩小元素
2.如果第二个参数省略，则第二个参数等于第一个参数
3.如果设置两个值，那么第一个值代表的是水平方向的放大或缩小，第二个值代表的是垂直方向的放大或者缩小
4.负数表示翻转缩放元素

倾斜

transform:skew(30deg);
总结：
1.如果省略了第二个参数，默认为0
2.第一个参数表示水平方向的倾斜，第二个参数表示垂直方向的倾斜

改变变换的基点

transform-origin:center,center;
总结：
1.可以通过关键字设置   left | right | top | bottom | center
2.可以设置具体的值   transform-origin:20px,30px;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .one{
            width: 400px;
            height: 400px;
            background-color: red;
            position: relative;
        }
        .two{
            width: 100px;
            height: 100px;
            background-color: blue;
            /*position: absolute;*/
            /*left: 50%;*/
            /*top: 50%;*/
            /*transform: translateX(-50%) translateY(-50%);*/
            /*margin-left: -50px;*/
            margin: 0 auto;
            transition: all 1s linear;
        }
        .one:hover .two{
            /*transform: translate(500px) rotate(360deg);*/
            /*transform: scale(2,3);*/
            transform: skew(20deg,20deg);
        }
    </style>
</head>
<body>
<div class="one">
    <div class="two">

    </div>
</div>
</body>
</html>