需要具备的相关知识
- css transform 坐标轴空间
- transform相关属性
- 使用建议
坐标轴空间
二维空间
水平方向是x轴,右边为正方向;垂直方向为y轴,向下是正方向;元素的左上角为原
点。
三维空间
水平方向是x轴,右边为正方向;垂直方向为y轴,向下是正方向;z轴指向查看者,
也就是你自己,指向你的方向为正方向;元素的左上角为原点。
transform相关属性
1. translate
在坐标轴上移动,使用方式参看css文档属性说明,效果加代码(分别在x、y、z轴
上移动)如下:
@-webkit-keyframes translate-style {
0% {
transform: translateX(0);
}
33% {
transform: translateX(50px);
}
66% {
transform: translateY(50px);
}
99% {
transform: translateZ(50px);
}
100% {
transform: translateX(0px);
}
}
.translate-style {
-webkit-animation: translate-style 2s linear infinite;
}
2. skew
定义沿着 X 和 Y 轴的 2D 倾斜转换,使用例子如下:
3. rotate
以坐标轴为轴进行旋转,使用方式参看css文档属性说明,效果加代码(分别
以x、y、z轴进行旋转,旋转的时候坐标轴会整体跟着变化,z轴始终是垂直于
元素的)如下:
@-webkit-keyframes translate-style-x {
0% {
transform: rotateX(0);
}
25% {
transform: rotateX(90deg);
}
50% {
transform: rotateX(180deg);
}
75% {
transform: rotateX(270deg);
}
100% {
transform: rotateX(360deg);
}
}
.translate-style-x {
-webkit-animation: translate-style-x 2s linear infinite;
}
4. backface-visibility
指定当元素背向屏幕时,元素是否可见,有hidden和visible两个属性,默认属性
是visible,如下对visible和hidden进行对比,注意蓝色块:
蓝色块代码
.back {
background-color: #2e78aa;
width: 70px;
height: 70px;
transform: rotateY(180deg);
backface-visibility: hidden;
}
5. transform-origin
设置旋转元素的基点位置,默认值是50% 50% 0,默认值和其他值对比:
实际计算流程如下:
![clipboard.png](/img/bVZc1R)
6. transform-style
使被转换的子元素保留其 3D 转换,值有flat、preserve-3d,默认是
flat也就是不保留,preserve-3d是保留其3d转换,使用对比如下:
preserve-3d代码如下:
```
.rotate-origin {
background-color: #2e78aa;
width: 70px;
height: 70px;
transform: rotateY(50deg);
transform-origin: 20px 20px;
transform-style: preserve-3d;
}
.rotate-origin-child {
background-color: #ff686c;
width: 80px;
height: 80px;
transform: rotateY(50deg);
}
```
7. perspective
设置元素被查看位置的视图,实际看的图描述如下:
用户看到的元素缩放后的大小计算方式分沿着z轴正方向移动,还是反方向移动,正方向,缩放后比例为: d / (d-z),反之缩放比例为d / (d+z)。
8. perspective-origin
设置 3D 元素的基点位置,就是改变用户眼睛的位置,说明如下:
使用建议
- 动画元素尽量用fixed、absolute定位方式,避免reflow
- 此文档后面持续更新
出一个题目
给定一个菱形图片(图案是菱形,但是切图是长方形),点击菱形区域出现弹窗,
如何实现(注意只能点击菱形区域出现弹窗,其他透明部分点击不能跳出弹窗哦)