2D转换之位移

最新推荐文章于 2024-11-01 16:54:21 发布

2301_76855186

最新推荐文章于 2024-11-01 16:54:21 发布

阅读量77

点赞数

文章标签： css css3 html5

本文链接：https://blog.csdn.net/2301_76855186/article/details/129355892

版权

2D转换的translate属性用于在X轴和Y轴上移动元素，不影响其他元素布局。它可以单独对X轴或Y轴进行操作，如translateX(px)和translateY(px)。正值沿X轴向右或Y轴向下移动，负值则相反。在hover事件中，translate常用于创建动画效果，例如使盒子抖动。此外，结合绝对定位和transform，可以轻松实现元素的水平垂直居中。

摘要由CSDN通过智能技术生成

2D转换移动：

2D转换移动代码：

transform:translate(X,Y)

注意：

1.如果只想移动一个方向，可以写成：transform:translare(X,0)或（0,Y）

2.向X轴方向移动：transform:translareX（px）

3.向Y轴方向移动：transform:translareY（px）

4.移动方向：X轴往右是正值，往左是负值。Y轴往上是负值，往下是正值。

5.对行内标签没有效果

6.如果参数使用%号，移动的数值就是自身宽高的百分比。

优点：

1.translate最大的优点是不会影响其他元素位置布局。

2.搭配：hover可以实现盒子抖动的一个效果，例：

 <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body{
            background-color: #ccc;
        }
        div{
            width: 300px;
            height: 300px;
            margin: 100px auto;
            background-color: pink;
            border: 2px solid skyblue;
            box-shadow: 0  1px 1px 0 rgba(0, 0, 0, .5);
        }
        div:hover{
            transform: translateY(-5px);
        }
<style>

3.可以搭配定位实现盒子水平居中垂直居中，例：

 <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        div{
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%);
            width: 300px;
            height: 300px;
            background-color: pink;
        }
    </style>

用绝对定位先走父盒子宽高的一半，再使用位移走自身宽高的一半，实现垂直居中，水平居中。