2D转换transform--translate（日志）

&Mark&

已于 2022-01-23 16:32:54 修改

阅读量314

点赞数

文章标签： css3 css html5

于 2022-01-23 10:38:44 首次发布

本文链接：https://blog.csdn.net/qq_64970126/article/details/122647654

版权

转换( transform )是CSS 3中具有顛覆性的特征之一, 可以实现元素的位移、旋转、缩放等效果
转换( transform )你可以简单理解为变形
●移动: translate
●旋转: rotate
●缩放: scale

2D实际上是指二维坐标系，建立在二维坐标系上进行相关元素转换，通常配合hover利用transition来使用 2D移动是2D转换里面的一种功能,可以改变元素在页面中的位置,类似定位。
1.语法
transform: translate(x,y); 或者分开写
t ransform: t ranslateX(n) ;
transform: t ranslateY(n) ;
2.重点
●定义2D转换中的移动,沿着X和Y轴移动元素
●translate最大的优点:不会影响到其他元素的位置
●translate中的百分比单位是相对于自身元素的translate:(50%,50%)（我们tranlate里面的参数是可以用%，里面的参数是%则移动的距离是盒子自身的宽度或者高度来对比的）;
●对行内标签没有效果

    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
        }
        
        p {
            display: inline-block;
            height: 100px;
            width: 100px;
            background-color: purple;
            margin: 50px;
            transition: all .5s ease 2s;
        }
        
        p:hover {
            width: 500px；
            分开写translateX Y属性时，X属性失效；可能兼容性存在问题
            /* transform: translate(-50px, -50px); */
            /* transform: translateY(-50px); */
        }
    </style>
</head>

<body>
    <div>
        <p></p>
    </div>
    <div></div>
</body>

</html>

&Mark&

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
2D转换transform--translate（日志）

转换( transform )是CSS 3中具有顛覆性的特征之一, 可以实现元素的位移、旋转、缩放等效果转换( transform )你可以简单理解为变形●移动: translate●旋转: rotate●缩放: scale
复制链接

扫一扫