今天在这里教大家怎样运用css哄好女朋友，这里就要运用到css3的动画效果。

变形操作-transform

变形操作-transform是css3中新增的属性，使用 transform 控制元素的变形操作，移动、旋转、3D转换、倾斜、缩放。transform的属性值有以下几种：

translateX    控制元素在X轴上移动

translateY    控制元素在Y轴上移动

translateZ   控制元素在Z轴上的移动

rotate()       2D旋转

rotateX()    X轴的旋转 3D

rotateY()    Y轴的旋转 3D

rotateZ()  Z轴的旋转 3D

如果只单纯的旋转Z轴的话，只会看到元素在页面中绕顺时针或逆时针方向转动。

scale    缩放

  scale的缩放只是视觉效果，并不改变元素的大小。

skew    倾斜

  skew的倾斜也只是视觉效果。

在进行元素的变形操作时，记得要设置视距（perspective设置视距，800p是人类能够接触最完美的视距）和开启3D效果（transform-style：persever-3D;开启3D效果可以将一个2D平面通过转换呈现出3D效果）

过渡动画-transition

过渡动画指的是一个变化的过程（从开始点到结束点这中间经历的一个阶段呈现出来）

使用transition就可以控制元素的过渡效果，通常与变形操作-transform配合使用，可以将元素变形前到变形后这一阶段的过程呈现出来。

过渡动画-transition必须要有的两个取值方式是过渡的属性名称和过渡所需的时间，当然transition的属性值不只有这两个，像过渡的类型，过渡的延时等等就并不是必须要取得值。

关键帧动画-@keyframes

关于如何哄好女朋友关键的点就在这里了。

关键帧动画，顾名思义就是一帧一帧的画面组合成的动画

运用关键帧动画需要先写一个剧本，就是你的元素该怎样运动，变化。

@keyframes (剧本名)

1%~100% 或 from to

写好剧本之后就可以在你需要添加动画的地方使用animation样式进行添加，animation和过渡动画transform一样都有两个必须要填写的属性值，分别是关键帧动画-@keyframes的剧本名字和动画的播放时间，其中播放方式，播放次数和延时是可以选填的。下面我们来看一下效果：

试问将这样的旋转木马的图片换成自己女朋友的图片，她还会生气？？？