css制作动画

需要具备的相关知识

• 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 元素的基点位置，就是改变用户眼睛的位置，说明如下：

使用建议

1. 动画元素尽量用fixed、absolute定位方式，避免reflow
2. 此文档后面持续更新

出一个题目

给定一个菱形图片（图案是菱形，但是切图是长方形），点击菱形区域出现弹窗，

如何实现（注意只能点击菱形区域出现弹窗，其他透明部分点击不能跳出弹窗哦)