translate 2D 转换 移动

2D 转换

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

2D转换是改变标签在二维平面上的位置和形状的一种技术,先来学习二维坐标系

2D转换 二维坐标系 translate

2D 转换之移动 translate

D移动是2D转换里面的一种功能,可以改变元素在页面中的位置,类似css position(定位)。

transform translate 语法格式

transform: translate(x,y);

transform : translate html实例代码:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>translate 2d转换移动 xinbiancheng.cn</title>
    <style>
        /* 移动盒子的位置: 定位   盒子的外边距  2d转换移动 */
        
        div {
            width: 200px;
            height: 200px;
            background-color: red;
            /* x就是x轴上移动位置 y 就是y轴上移动位置 中间用逗号分隔*/
            /* transform: translate(x, y); */
            /* transform: translate(100px, 100px); */
            /* 1. 我们如果只移动x坐标 */
            /* transform: translate(100px, 0); */
            /* transform: translateX(100px); */
            /* 2. 我们如果只移动y坐标 */
            /* transform: translate(0, 100px); */
            /* transform: translateY(100px); */
        }
        
        div:first-child {
            transform: translate(30px, 30px);
        }
        
        div:last-child {
            background-color: green;
        }
    </style>
</head>

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

</html>

translate 总结

定义 2D 转换,沿着 X 和 Y 轴移动元素

translate中的百分比单位是相对于自身元素的 translate:(50%,50%);

translate类似定位,不会影响到其他元素的位置

对行内标签没有效果

其它推荐文章

CSS3 2D 转换