需要具备的相关知识
- 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,默认值和其他值对比：
实际计算流程如下：
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
- 此文档后面持续更新
出一个题目
给定一个菱形图片（图案是菱形，但是切图是长方形），点击菱形区域出现弹窗，
如何实现（注意只能点击菱形区域出现弹窗，其他透明部分点击不能跳出弹窗哦)