transform
注意
脱标
transform操作是脱标进行的
百分比
在transform属性中的百分比参照的是标签自身且对应，但是Z轴不能设置百分比
transform: translateX(100%) translateY(100%) // 向右移动标签自身百分之百宽度距离 向下移动标签自身百分之百高度距离
中断
在transform中存在多个值以空格隔开，当其中一个拼写错误会导致整个错误
transform: translateX(100%) HAHAtranslateY(100%)
大小写
css不区分大小写
3D
基本上牵扯到3D的都需要给父元素设置perspective才能显示
定点
默认居中，以定点建立的坐标系会随着定点的移动而移动
缩放、旋转都是以定点为中心
transform-origin: left top ; // 设置左上角为定点
transform-origin: 100% 200%;
transform-origin: 100px 200px 100px; // z轴参与
3D空间
不可继承
transform-style: flat|preserve-3d;
| 值 | 描述 |
|---|---|
| flat | 子元素将不保留其 3D 位置。 |
| preserve-3d | 子元素将保留其 3D 位置。 |
移动
X
transform: translateX(10px) // 正数元素向右移动 负数元素向左移动
Y
transform: translateY(10px) // 正数元素向下移动 负数元素向上移动
Z
transform: translateZ(10px) // 正数元素向前移动 负数元素向后移动
<style>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
list-style: none;
}
body {
width: 100vw;
height: 100vh;
background: #34495e;
}
main {
position: absolute;
left: 50%;
top: 50%;
width: 200px;
height: 200px;
transform-style: preserve-3d;
transition: 2s;
transform: perspective(900px) rotateY(60deg);
}
body:hover main {
transform: perspective(600px) rotateY(60deg) scaleZ(5);
}
div {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #f1c40f;
}
div.b {
background: #8e44ad;
transform: translateZ(-100px);
}
</style>
<main>
<div class="f"></div>
<div class="b"></div>
</main>
// 原文链接：https://doc.houdunren.com/css/12%20%E5%8F%98%E5%BD%A2%E5%8A%A8%E7%94%BB.html#translatez
组合简写
transform: translate(100px,100px);
transform: translate3d(100px,100px,100px);
缩放
以定点为中心
X
transform: scaleX(1.5); // X轴缩放为原来的1.5倍 负数会导致翻转（镜像）
Y
transform: scaleY(1.5); // y轴缩放为原来的1.5倍 负数会导致翻转（镜像）
Z
transform: scaleZ(1.5) // z轴缩放为原来的1.5倍 负数会导致翻转（镜像）
组合简写
transform: scale(1.5,1.5); // x轴和y轴为原来的1.5倍
transform: scale3d(1.5,1.5,1.5); // x轴y轴z轴为原来的1.5倍
旋转
以定点为中心
X
transform: rotateX(70deg); // x轴 正 半轴，正数顺时针 负数逆时针 旋转70度
Y
transform: rotateY(70deg); // y轴 负 半轴，正数顺时针 负数逆时针 旋转70度
Z
transform: rotateZ(70deg); // z轴 正 半轴，正数顺时针 负数逆时针 旋转70度
transform: rotate(70deg); // z轴 正 半轴，正数顺时针 负数逆时针 旋转70度
顺序相关
transform: rotateX(45deg) rotateY(100deg); // 先旋转X再旋转Y
或
transform: rotateY(100deg) rotateX(45deg); // 先旋转Y再旋转X
组合简写
transform: rotate3d(1,1,1,45deg) // x y z 按矢量旋转 正数顺时针 负数逆时针
倾斜
X
transform: skewX(45deg); // x轴 逆时针旋转45度 倾斜元素
Y
transform: skewX(45deg); // y轴 顺时针旋转45度 倾斜元素
组合简写
transform: skew(40deg,40deg); // 需要注意的是效果和 transform:skewX(40deg) skewY(40deg); 并不一致
// skew强调 同时
视距
transform: perspective(100px); // 设置视口距离物体100px 值越小，透视越明显
当多个元素组合成一个图形时，只给父元素设置perspective距离。当然同时给子元素设置也是可以的，但是如果值不对，会显得不协调
perspective
指定了观察者与 z=0 平面的距离，使具有三维位置变换的元素产生透视效果。z>0 的三维元素比正常大，而 z<0 时则比正常小，大小程度由该属性的值决定
perspective: 800px;
视角
该属性必须与 perspective属性一同使用，而且只影响 3D 转换元素
| 默认值： | 50% 50% |
|---|---|
| 继承性： | no |
perspective-origin: x-axis y-axis;
| 值 | 描述 |
|---|---|
| x-axis | 定义该视图在 x 轴上的位置。默认值：50%。可能的值：left center right length % |
| y-axis | 定义该视图在 y 轴上的位置。默认值：50%。可能的值：left center right length % |
backface-visibility
指定当元素背面朝向观察者时是否可见
backface-visibility: visible;
backface-visibility: hidden;
