H5/C3进阶(13)下--CSS新特性（css动画，2d，3d转换）

2.6. 2D转换

**转换( transform )**是CSS3中具有颇覆性的特征之一,可以实现元素的位移、 旋转、缩放等效果转换( transform )可以简单理解为变形。

● 移动: translate

● 旋转: rotate

● 缩放: scale

2D转换是改变标签在二维平面上的位置和形状的一种技术。

2.6.1. 移动: translate

2D移动是2D转换里面的一种功能,可以改变元素在页面中的位置,类似定位。

语法：

transform: translate(x,y); 

或者分开写

transform: translateX(n) ;

transform: translaterY(n) ;

注意：

● 定义2D转换中的移动,沿着X和Y轴移动元素。

● translate最大的优点:不会影响到其他元素的位置。

● translate中的百分比单位是相对于自身元素的translate:(50%,50%)。

● 对行内标签没有效果。

2.6.2. 旋转: rotate

2D旋转指的是让元素在2维平面内顺时针旋转或者逆时针旋转。

语法;

transform: rotate (度数)

注意;

● rotate里面跟度数,单位是deg比如rotate(45deg)。

● 角度为正时,顺时针,负时,为逆时针。

● 默认旋转的中心点是元素的中心点。

设置转换中心点transform-origin

我们可以设置元素转换的中心点

语法

transform-origin: x y;

重点：

● 注意后面的参数x和y用空格隔开。

● x y 默认转换的中心点是元素的中心点(50% 50%)。

● 还可以给xy设置像素或者方位名词( top bottom left right center )。

2.6.3. 缩放: scale

缩放,顾名思义，可以放大和缩小。只要给元素添加上了这个属性就能控制它放大还是缩小。

语法

trans form:scale(x,y) ;

重点：

● 注意其中的x和y用逗号分隔。

● transform:scale(1,1) : 宽和高都放大-倍,相对于没有放大。

● transform:scale(2,2) : 宽和高都放大了2倍。

● transform:scale(2) : 写-个参数,第二个参数则和第一个参数一 样,相当于scale(2,2)。

● transform:scale(0.5,0.5) :缩小。

● sacle缩放最大的优势 :可以设置转换中心点缩放,默认以中心点缩放的,而且不影响其他盒子。

2.6.4. 2D转换综合写法

注意:

1.同时使用多个转换,其格式为: transform: translate() rotate0 scale()等。

2.其顺序会影转换的效果。( 先旋转会改变坐标轴方向)。

3.当我们同时有位移和其他属性的时候,记得要将位移放到最前。

2.7 CSS3动画

动画( animation ) 是CSS3中具有颠覆性的特征之一, 可通过设置多个节点来精确控制一个或一组动画,常用来实现复杂的动画效果。相比较过渡,动画可以实现更多变化,更多控制,连续自动播放等效果。

2.7.1动画的基本使用

制作动画分为两步:

1.先定义动画 。

用keyframes定义动画(类似定义类选择器)

@keyframes动画名称{

0% {

width: 100px;

}

100%{

width: 200px; 

}

}

动画序列

● 0% 是动画的开始, 100% 是动画的完成。这样的规则就是动画序列。

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

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

● 请用百分比来规定变化发生的时间,或用关键词"from"和"to" ,等同于0%和100%。

2. 再使用(调用)动画。

div {

/* 调用动画 */

animation-name: 动画名称;

animation- duration:/*持续时间*/；
}

2.7.2. 动画的常用属性

2.7.3. 动画简写

5.3动画简写属性

animation :动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或者结束的状态;

例 :

 animation: myfirst 5s linear 2s infinite alternate ;

2.7.4. 速度曲线细节

animation-timing-function :规定动画的速度曲线,默认是”ease”

2.8、 3D转换

我们生活的环境是3D的,照片就是3D物体在2D平面呈现的例子。

有什么特点

● 近大远小。

● 物体后面遮挡不可见。

在网页上构建3D效果的时候参考这些特点就能产出3D效果。

● x轴:水平向右 注意: x右边是正值，左边是负值

● y轴:垂直向下 注意: y下面是正值,上面是负值

● z轴:垂直屏幕 注意:往外面是正值，往里面是负值

主要内容

● 3D位移: translate3d(x,y,z)

● 3D旋转: rotate3d(xy,Z)

● 透视: perspective

● 3D呈现transfrom-style

2.8.1 3D位移: translate3d(x,y,z)

Z轴一般用px做单位

2.8.2 3D透视perspective

在2D平面产生近大远小视觉立体,但是只是效果二维的

● 如果想要在网页产生3D效果需要透视(理解成3D物体投影在2D平面内)。

● 模拟人类的视觉位置,可认为安排一只眼睛去看。

● 透视我们也称为视跑:视距就是人的眼睛到屏幕的距离。

● 距离视觉点越近的在电脑平面成像越大,越远成像越小。

● 透视的单位是像素。

透视写在被观察元素的父盒子上面的

d :就是视距,视距就是一个距离人的眼睛到屏幕的距离。

Z:就是z轴,物体距离屏幕的距离, 2轴越大(正值)我们看到的物体就越大。

2.8.3 3D旋转rotate3d

3D旋转指可以让元素在=维平面内沿着x轴, y轴, z轴或者自定义轴进行旋转。

语法：

● transform:rotateX(45deg) :沿着x轴正方向旋转45度。

● transform:rotateY(45deg) : 治着y轴正方向旋转45deg。

● transform:rotateZ(45deg) : 沿着Z轴正方向旋转45deg。

● transform:rotate3d(xy,z,deg) :沿着自定义轴旋转deg为角度(了解即可)。

对于元素旋转的方向的判断用左手准则。

左手准则

对X轴

● 左手的手拇指指向x轴的正方向。

● 其余手指的弯 曲方向就是该元素沿着x轴旋转的方向。

对Y轴

● 左手的手拇指指向y轴的正方向

● 其余手指的弯曲方向就是该元素沿着y轴旋转的方向(正值)

transform:rotate3d(x,y,z,deg) :沿着自定义轴旋转deg为角度(了解)。

xyz是表示旋转轴的矢量，是标示你是否希望沿着该轴旋转，最后一个标示旋转的角度。

●transform:rotate3d(1,0,0,45deg) 就是沿着x轴旋转45deg。

●transform:rotate3d(1,1.0.45deg) 就是沿着对角线旋转45deg。

2.8.4 3D呈现

● 控制子元素是否开启三维立体环境。

● transform- style: flat子元紫不开启3d立体空间默认的。

● transform-style: preserve- 3d;子元索开启立体空间。

● 代码写给父级,但是影响的是子盒子。

● 这个属性很重要,后面必用。