欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

CSS之2D转换(transform)

程序员文章站 2024-01-24 19:10:58
...

平移

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>

CSS之2D转换(transform)

旋转

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>
相关标签: Web前端CSS