2D transform 1-translate

2023-12-27 19:48:02

移位: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>

文章来源:https://blog.csdn.net/u014378108/article/details/135227804
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。