transform 2D 空间转换
在以前我们改变元素的位置需要设置 left
、 right
这类的,它对其它元素有很大的影响,现在通过 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);
}
图