transform 2D 平面转换在以前我们改变元素的位置需要设置 left 、 right 这类的属性，它对其它元素有很大的影响，现在通过 transform 就可以实现任意空间的改变了。 1. 官方解释CSS transform 属性允许你旋转，缩放，倾斜或平移给定元素。这是通过修改 CSS 视觉格式化模型的坐标空间来实现的。 2. 解释transfrom 这个属性可以改变一个目标元素在页面中的位置，例如相对原来元素所在的位置平移，相对原来的尺寸放大或者缩小，也可以旋转或者斜切。 3. 语法通用坐标轴说明: x 代表横轴，y 代表纵轴。
包含参数： @H_301_63@ 值 描述 translate(x,y) 可以改变元素的位置，而不会对相邻元素由影响。 translateX(x) 只改变元素的水平位置。 translateY(y) 只改变元素在竖直方向的位置。 scale(x,y) 元素缩放，x 代表水平方向，y 代表竖直方向。 scaleX(x) 仅对元素 x 方向上缩放。 scaleY(y) 仅对元素 y 方向上缩放。 skew(x-angle,y-angle) 定义沿着 X 和 Y 轴的 2D 倾斜转换。 skewX(angle) 定义沿着 X 轴的 2D 倾斜转换。 skewY(angle) 定义沿着 Y 轴的 2D 倾斜转换。 rotate(angle) 在平面上旋转一个角度 4. 实例接下来我们都是对 demo 这个元素进行操作。 <div class="demo"></div>
.demo{
transform: translate(px,px);
}效果图
<!DOCTYPE html>
<html lang="en">
<head>
<Meta charset="UTF-8">
<Meta 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);
}效果图
.demo{
transform:skew(deg,deg);
}效果图
如果只是对一个方向斜切可以如下： .demo{
transform:skewX(deg);
}
.demo{
transform:rotate(deg);
}效果图
5. 兼容性@H_301_63@ IE Edge Firefox Chrome Safari Opera ios android 9+ 12+ 28+ 4+ 6.1+ 12.1+ 7+ 4.4 6. 场景
7. 小结
|
