2D transform

u014378108

已于 2023-12-28 10:20:01 修改

阅读量364

点赞数 8

分类专栏： css 文章标签： css css3

于 2023-12-27 18:01:21 首次发布

本文链接：https://blog.csdn.net/u014378108/article/details/135227804

版权

css 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

移位：translate

缩放：scale

旋转：rotate

扭曲：skew

<style>
     .outer {
            width: 200px;
            height: 200px;
            border: 2px solid black;
            margin-top: 100px;
        }
        .inner {
            width: 200px;
            height: 200px;
            background-color: pink;
            transform: translate(100px,50px);
        }

        .inner2 {
       
        }
</style>
<body>
    <div class="outer">
        <div class="inner">你好啊</div>
    </div>

    <div class="outer">
        <div class="inner2">你好啊</div>
    </div>
</body>

相对于原来的位置移动

缩放：scale

沿着中心缩放

居中

蓝色的div居中，

父元素relative

子元素absolute,left:50%,top:50% 没有居中

可以方法1：

子元素margin-left: 负的自身宽度的一半

子元素margin-top:负的自身高度的一半

方法2：

使用移动，子元素左移动自身的50%，子元素上移动自身的50%

即 translate(50%,50%)

 .outer1{
            width:800px;
            height: 400px;
            background-color: antiquewhite;
            position:relative;
        }


        .inner2 {
            width: 300px;
            height: 100px;
            background-color: aqua;
            position: absolute;
            left:50%;
            top: 50%;
            transform: translate(-50%,-50%);
        }

 <div class="outer1">
        <div class="inner2">你好啊</div>
    </div>

transform-origin 变换原点

原点默认在中心

变换原点对translate平移没有影响

transform-origin: right top; 使用关键词

transform-origin: right top; 使用百分比

u014378108

关注

8
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
2D transform

子元素absolute,left:50%,top:50% 没有居中。使用移动，子元素左移动自身的50%，子元素上移动自身的50%子元素margin-left: 负的自身宽度的一半。子元素margin-top:负的自身高度的一半。即 translate(50%,50%)移位：translate。父元素relative。相对于原来的位置移动。
复制链接

扫一扫