2D位移变换

半夜删你代码·

已于 2022-04-13 08:59:10 修改

阅读量206

点赞数

文章标签：前端

于 2022-04-12 20:45:52 首次发布

本文链接：https://blog.csdn.net/m0_60376759/article/details/124130507

版权

2D位移变化

transform：translate（px，像素、%，相对于自身的高度来计算（包括内容区，边框，内边距）

）

transform移动的位置，不会影响其他元素的位置，但是原位置会保留位置

transform作为子盒子，子绝父相，可以脱离文档流，不占位置

平移：

水平方向移动50px

transform: translateX(50px);

水平方向移动移动的是相对于自身的百分比，等于移动一个自己

transform: translateX(100%);

如果translate里面只有一个的值的时候那么代表的是水平方向，两个值代表X，Y，需要用逗号隔开

链式执行：transform: translateX(50px) translateX(50px) translateY(50px);

translate中的百分比单位是相对于自身元素的 translate:(50%,50%);
translate类似定位，不会影响到其他元素的位置
对行内标签没有效果

给父盒子设置鼠标滑过时，在父盒子中加上transition-duraing : 2s/ transition: tranform 2s 样式变换的时间 ,在.box:hover{}加上需要变换的样式

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>2D位移变化</title>
        <style>
            .w{
                position: relative;
                margin: 50px;
                height: 300px;
                width: 300px;
                border: 1px solid #000;
            }
            .box{
                display: inline-block;
                /* position: absolute; */
                height: 100px;
                width: 100px;
                background-color: #369;
                /* transition-duration: 2s; */
                transition: transform 5s;
                /* 像素px */
                /* 百分比 */
                /* transform: translate(100%,100%); */
                /* 链式执行 */
                /* transform: translateX(50px) translateX(50px); */
            }
            .box:hover{
                transform: translate(100px,10px);

            }
            span{
                background-color: red;
                transform: translate(100px);
            }
        </style>
    </head>
    <body>
        <div class="w">
            <p>这是一个p标签</p>
            <div class="box"></div>
            <span>这是一个span标签</span>
            <p>Lorem ipsum dolor sit amet.</p>
        </div>
    </body>
</html>

2D旋转：2D旋转指的是让元素在2维平面内顺时针旋转或者逆时针旋转

使用2D旋转的步骤：

给元素添加转换属性 transform
属性值为 rotate(角度) 如 transform:rotate(30deg) 顺时针方向旋转30度

rotate() 设置旋转的角度；角度的单位是 deg，值越大，顺时针旋转的就越多，正负值都可以设置。

2D缩放：2D缩放指的是让元素在2维平面内大小发生变化

使用2D缩放的步骤：

给元素添加转换属性 transform
转换的属性值为 scale(宽的倍数,高的倍数) 宽变为两倍，高变为3倍transform:scale(2,3)

scaleX()，scaleY()，scale(X,Y)，scale()内只写一个值时，XY都应用，以中心为原点，向四周缩放

倍数为0时，元素会消失不见

总结：

transform:scale(1,1) 放大一倍相对于没有放大
transform:scale(2,2) 宽和高都放大了2倍
transform:scale(2) 只写一个参数第二个参数则和第一个参数一样相当于 scale(2,2)
transform:scale(0.5,0.5) 缩小
transform:scale(-2,-2) 反向放大2倍很少用负数容易让人产生误解

使用缩放实现小于12px的文字，对盒子设置字体属性值，等比缩放，未设置时按默认文字大小16px缩放

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box01 {
            font-size: 12px;
        }

        .box02 {
            font-size: 24px;
            transform: scale(.5);
        }
    </style>
</head>
<body>
    <p class="box01">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi impedit odit reiciendis molestias perspiciatis autem quam facere consequuntur perferendis neque nemo rerum fugit, illum est facilis doloribus deleniti magni fugiat.
    </p>
    <p class="box02">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Obcaecati soluta, voluptatibus perspiciatis, unde vero excepturi sit culpa ut dignissimos rerum dolor neque quaerat explicabo voluptatem velit optio quasi cumque quia!</p>
</body>
</html>

2D扭曲

skewX()元素在水平方向扭曲。如果只为正数，元素的左上角和右下角将会被拉扯。如果值为负数，元素的右上角和左下角会被拉扯.（角度为正值时，左上尖角往左边走）

skewY()元素在垂直方向扭曲变形。如果只为正数，元素的左上、右下将会被拉扯。如果只为负数，元素的右上、左下将会被拉扯。（角度为正值时，左上尖角往右边走）

skew（）

x 表示在x轴上的倾斜角度，单位为 deg。
y 表示在y轴上的倾斜角度，单位为 deg。

设置X轴扭曲时，Y轴的在盒子的高度范围内变化

设置Y轴扭曲时，X轴的在盒子的高度范围内变化

XY轴都扭曲时，根据XY的扭曲程度改变范围

多重变化

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>

        .box {
            position: absolute;
            left: 50%;
            top: 50%;
            width: 200px;
            height: 200px;
            line-height: 200px;
            text-align: center;
            font-family: "楷体";
            font-size: 120px;
            background-color: red;

            transform: translate(-50%, -50%) rotate(45deg);
        }

        .box span {
            display: inline-block;
            transform: rotate(135deg);
        }
    </style>
</head>
<body>
    <div class="box">
        <span>福</span>
    </div>
</body>
</html>

transform-origin

设置或检索对象以某个原点进行转换。

如果提供两个值，第一个用于横坐标，第二个用于纵坐标。
如果只提供一个，该值将用于横坐标；纵坐标将默认为50%。
transform-origin:50% 50%; 默认值元素的中心位置百分比是相对于自身的宽度和高度
transform-origin:top left; 左上角和 transform-origin：0 0;相同
transform-origin:50px 50px; 距离左上角 50px 50px 的位置
transform-origin：0; 只写一个值的时候第二个值默认为 50%;

transform-origin设置的是元素在父盒子中的位置，

origin定义的位置不影响平移，在原位置变换样式

对旋转与缩放有影响，在origin设置位置的基础上进行旋转或着缩放

transform-origin:100% 100%，相等于往下走一个高度，往右走一个宽度

从左上角0.0开始算起，x往右走多少，y往下走多少，那一个点就是旋转的中心点

半夜删你代码·

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2D位移变换

2D位移变化transform：translate（px，像素、%，相对于自身的高度来计算（包括内容区，边框，内边距））transform移动的位置，不会影响其他元素的位置，但是原位置会保留位置transform作为子盒子，子绝父相，可以脱离文档流，不占位置平移：水平方向移动50pxtransform: translateX(50px);水平方向移动移动的是相对于自身的百分比，等于移动一个自己transform: translateX(100%);如果tr.
复制链接

扫一扫