您好, 欢迎来到 !    登录 | 注册 | | 设为首页 | 收藏本站

transform 2D 空间转换

在以前我们改变元素的位置需要设置 leftright 这类的,它对其它元素有很大的影响,现在通过 transform 就可以实现任意空改变了。

CSS transform 允许你旋转,缩放,倾斜或平移给定元素。这是通过 CSS 视觉格式化模型的坐标空间来实现的。

transfrom 这个可以改变目标元素在中的位置,例如相对原来元素所在的位置平移,相对原来的尺寸放大或者缩小,也可以旋转或者斜切。

通用坐标轴说明:

x 代表横轴,y 代表纵轴。

包含参数:

接下来我们都是对 demo 这个元素进行操作。

<div class="demo"></div>
.demo{
     transform: translate(px,px);
}

<!DOCTYPE html>
<html lang="en">
<head>
    < charset="UTF-8">
    < name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            perspective: px;
            transform-style: preserve-d;   
        }
        .commn{
            width:px;
            height:px;
            text-align: center;
            line-height: px;
            background:#f2f2f2;
            border:px solid #ccc;        
            position: absolute;     
            top: ;
            left: ;
            
        }
        .demo{
            z-index: ;   
            opacity: ;       
            background: red;               
        }
        .demo-3d{            
            transform:translated(px  ,px ,-px) rotateZ(deg);

        }
    </style>
</head>
<body>
    <div class="commn demo">transfrom3d</div>
    <div class="commn demo-3d">transfrom3d</div>
</body>
</html>
.demo{
     transform: translateX(px);
}

.demo{
     transform: translateY(px);
}

.demo{
     transform: scale(,);
}

scale 接受倍数大于 1 时候放大,小于 1 时候缩小。当 x,y 参数的值一样时,可以如下面这样写:

.demo{
     transform: scale();
}

如果只需要对水平方向缩放,可以向下面这样写,竖直方向同理:

.demo{
     transform: scaleX();
}

.demo{
    transform:skew(deg,deg);
}

@H__813@

.demo{
    transform:skew(deg,deg);
}

如果只是对方向斜切可以如下:

.demo{
    transform:skewX(deg);
}

@H__813@

.demo{
    transform:rotate(deg);
}


联系我
置顶