CSS3变换与动画

CSS3 2D 转换方法

CSS3 3D 转换

需要设置其3D模式，表示所有子元素在3D环境
设置景深，调节显示时的模糊度及大小等

一、transform-style: preserve-3d声明是必须的，该声明应用在3D变换的兄弟元素们的父元素上，也就是舞台元素或者容器元素。

二、3D视角---透视
perspective属性，一般作用在舞台元素
CSS3 3D transform的透视点是在浏览器的前方
perspective-origin属性：透视中心点
backface-visibility:hidden，设置背后元素不可见。默认为可见。

CSS3 过渡

transition属性：元素将渐变至某状态
transition: property duration timing-function delay;

div {
    width: 100px;height: 100px;
    background: red;
    -webkit-transition: width 2s, height 2s, -webkit-transform 2s; 
    transition: width 2s, height 2s, transform 2s;
}
div:hover {
    width: 200px;height: 200px;
    -webkit-transform: rotate(180deg); 
    transform: rotate(180deg);}

CSS3动画创建步骤

1，创建@keyframes（关键帧）
@keyframes name{from{p:v}50%{p:v1}to{p:v2}},

2，为动画对象添加动画属性
animation: name duration timing-function delay iteration-count direction fill-mode play-state;

CSS3动画