2D旋转transform

最新推荐文章于 2022-08-29 23:08:00 发布

micoria

最新推荐文章于 2022-08-29 23:08:00 发布

阅读量497

点赞数

分类专栏： css3 笔记文章标签： css3

本文链接：https://blog.youkuaiyun.com/micoria/article/details/113458707

版权

笔记同时被 2 个专栏收录

10 篇文章

订阅专栏

css3

4 篇文章

订阅专栏

5.1 transform转换

5.1.1 translate(x,y) 位移

可以改变元素在页面中的位置，类似定位。

经常和transition过渡配合做出相对应的效果。

补充：

现在可以将盒子移动的方式有哪些？

定位（相对定位不会影响其他盒子的位置）
外边距（margin）
2D转换
- 区别：和以上两种方式不同的是，2D转换不会影响其他盒子的位置（可以和position组合进行盒子垂直居中定位，下面有案例）

语法

transform: translate(x , y);

transform: translate(100px,30px);

要点
- x 代表横向移动的距离，y代表纵向移动的距离
- 优点：不会影响其他盒子的位置。
- 使用百分比% 是根据自身宽高进行移动，则移动自身宽高的一半。transform:translate(50%,50%);
- 对行内标签没有作用

案例（盒子垂直居中）：

<style>
    * {
        margin: 0;
        padding: 0;
    }
	 .box3 {
            position: relative;
            width: 300px;
            height: 300px;
            background-color: rgb(238, 206, 169);
        }
        
        .center {
            position: absolute;
            width: 50px;
            height: 50px;
            top: 50%;
            left: 50%;
            /*
            还有一种方式进行外边距使内部盒子移到中央
            margin-top: -25px;
            margin-left: -25px;
            */
            
            /*
            translate和margin不同的是，translate不管怎么改变盒子的大小，
            都会水平垂直居中。
            */
            transform: translate(-50%, -50%);
            background-color: rgb(142, 207, 67);
        }
</style>
<body>
    <div class="box3">
        <div class="center"></div>
    </div>
</body>