前端基础（11）：CSS3 3d

学习目标

• 1、3D
• 2、CSS3动画

一、CSS3 转换

转换是使元素改变形状、尺寸和位置的一种效果。

您可以使用 2D 或 3D 转换来转换您的元素。

在咱们的转换概念当中：是没有display这么一说的，通过改变元素的透明度去实现从无到有

１、3D 转换

说明：

CSS3 允许您使用 3D 转换来对元素进行格式化。

1）rotate() 旋转函数 取值度数 ,单位：deg

通过 rotate() 方法，元素顺时针旋转给定的角度。

允许负值，元素将逆时针旋转。

rotateX() 　rotateY() 　rotateZ()

2）translate() 位移函数，元素从其当前位置移动：

这三种写法是等价

　　transform:translateZ(800px) translateX(30px) translateY(30px);

　　transform:translateZ(800px) translate(30px,30px);

　　transform: translate3d(30px,30px,800px)

２、创建3d场景｛Perspective:800px;｝

径深

说明：

（增加一个维度/窗口）

表示浏览器对我将要观察到的三维物体有800px那么远

perspective-origin:; 视角

观察三维物体的角度

用法：

perspective属性有两种书写形式

1）写在舞台元素上（动画元素们的共同父辈元素）以父元素的视角为中心观看；

示例：

　　.box{

　　 perspective: 1200px;

　　}

2）写在当前动画元素上（起效果的那个元素），与transform的其他属性写在一起，以子元素为中心来观看。

示例：

　　.box div{

　　　　transform:perspective(1200px) translateZ(300px) translate(30px,30px);

　　}

２、规定被嵌套元素如何在 3D 空间中显示。｛transform-style:preserve-3d ｝

说明：

告诉浏览器之后进行的transform都是对3d的世界进行了

transform-style:preserve-3d 一定要加给transform的父元素

3、｛backface-visibility：hidden｝

说明：

定义元素在不面对屏幕时是否可见。

二、CSS3动画

什么是 CSS3 中的动画？

动画是使元素从一种样式逐渐变化为另一种样式的效果。 您可以改变任意多的样式任意多的次数。

请用百分比来规定变化发生的时间，或用关键词 "from" 和 "to"，等同于 0% 和 100%。 0% 是动画的开始，100% 是动画的完成。

为了得到最佳的浏览器支持，您应该始终定义 0% 和 100% 选择器。

通过 CSS3，我们能够创建动画， 这可以在许多网页中取代动画图片、Flash 动画以及 JavaScript

1.CSS3 @keyframes 规则

@keyframes myfirst {

from {background: red;} to {background: yellow;}

}

@keyframes 规则用于创建动画。

在 @keyframes 中规定某项 CSS 样式， 就能创建由当前样式逐渐改为新样式的动画效果。

Internet Explorer 10、Firefox 以及 Opera 支持 @keyframes 规则和 animation 属 性。

注释：Internet Explorer 9，以及更早的版本，不支持 @keyframe 规则或 animation 属性。

2. animation:myfirst 5s;

当您在 @keyframes 中创建动画时， 请把它捆绑到某个选择器，否则不会产生动画效果。

通过规定至少以下两项 CSS3 动画属性，即可将动画绑定到选择器：

规定动画的名称 规定动画的时长

把 "myfirst" 动画捆绑到 div 元素，时长：5 秒：

3.animation

1）animation-name动画名称（关键帧名称）

2）animation-duration 动画持续时间

3）animation-delay动画延迟

4）animation-iteration-count重复次数 infinite为无限次 / value;一个数字，定义应该播放多少次动画

5）animation-direction播放前重置 （动画是否重置后再开始播放）

alternate动画直接从上一次停止的位置开始执行

normal动画第二次直接跳到0%的状态开始执行

6）animation-play-state 播放状态

running 播放

paused 暂停

7）animation-fill-mode规定对象动画时间之外的状态。

Forwards 当动画完成后，在最后一个关键帧中

Backwards 在 animation-delay 所指定的时间之前，应用在第一个关键帧中

Both 向前和向后填充模式都被应用。

None 不改变默认行为

8）animation-timing-function动画运动 形式

linear匀速。

ease缓冲。

ease-in由慢到快。

ease-out由快到慢。

ease-in-out由慢到快再到慢。

step-start 动画分成10步，动画执行时为开始左侧端点的部分为开始。

step-end 动画分成10步，动画执行时以结尾端点为开始，默认值为 end。

指定在每个间隔的起点或是终点发生阶跃变化，默认为 end。

---