移动web第一节 （ 过渡，2D转换，3D转换，动画，帧动画，私有前缀）

目标

能够理解过渡transition的使用方式

能够实现基本的 2d 变换

了解2d转换的合写问题 (小难点 重点)

能够认识3d坐标系

能够实现立方体案例

能够理解 perspective 和 transform-style: preserve-3d 的区别

CSS3

过渡

过渡的属性

1. 如果两个状态发生改变，没有过渡，效果是瞬间变化的
2. 如果加上了过渡，那么这个过程就会有动画的效果。
3. 整个状态变化的过程是由浏览器来完成的，我们只需要关注开始状态与结束状态即可。

transition: all 1s;

【演示：过渡基本语法】

过渡的注意点：

• 过渡必须要有两个状态的变化。
• 过渡可以写在A状态，也可以写在B状态，但是如果写在B状态，那么回来的时候，就没有过渡效果了。

2D转换

transform: 转换，是CSS3最具颠覆性的几个特性之一，既可以用于2D转换，也可以用于3D转换。

transform：2D转换，元素在平面上实现移动、旋转、缩放、斜切等操作

translate平移

transform: translateX(100px);
transform: translateY(100px);
transform: translate(100px, 100px);
transform: translate(50%, 50%);

注意：

• translate的值可以是px，也可以是百分比，如果是百分比，那么参照的是自身的宽高。
• translate移动的元素并不会影响其他盒子，类似于相对定位。

【案例：让一个盒子水平垂直居中】

scale缩放

transform: scaleX(0.5);/*让宽度变化*/
transform: scaleY(0.5);/*让高度变化，注意不能写多个transform，不然会覆盖。*/
transform: scale(0.5);/*让宽度和高度同时变化*/

注意：

• scale接收的值倍数,没有单位
• 一个值表示宽高等比例的缩放。
• 可以通过transition-origin设定旋转原点

【案例：放大镜效果】

transform-origin转换原点

通过transform-origin可以设置转换的中心原点。

transform-origin: center center;
transform-origin: 40px 40px;

rotate旋转

transform: rotate(360deg);//旋转360度
transform: rotate(-360deg);//逆时针旋转360度

注意：

• 单位是deg，角度，不是px
• 正值顺时针转，负值逆时针转
• 可以通过transform-origin设定旋转原点

【案例：扑克牌效果】

skew斜切(变形)

skew在实际开发中，是用的最少的一个属性。一般来说，x和y只会倾斜其中的一个

/*在水平方向倾斜30deg*/
transform: skewX(30deg);
/*在垂直方向倾斜30deg*/
transform: skewY(30deg);

转换合写问题(重点)

1.当一个元素有多个2D转换(比如 既旋转又缩放)效果 采用连写的方式
2.2D转换的顺序不同 结果也就不同 主要针对的是移动和旋转 (物体发生了旋转 内部坐标系也跟着发生了旋转)
3.多个状态下面有2D转换效果时, 需要复制前面已经存在的transform效果(转换至)

3D转换

transform:不仅可以2D转换，还可以进行3D转换。

思考：2D与3D的区别？

坐标轴

用X、Y、Z分别表示空间的3个维度，三条轴互相垂直。注意+Y是向下的。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-u6IUUe38-1585667970658)(images/zbz.png)]

perspective透视

电脑显示屏是一个2D的平面，因为我们看不出来旋转的方向，通过perspective属性，可以定义3D 元素距视图的距离，单位是px。

说白了，设置了perspective属性后，就有了进大远小的效果了，在视觉上，让我们能看出来3d的效果。

注意：当为元素定义 perspective 属性时，其子元素会获得透视效果，而不是元素本身。

perspective：500px;

关于近大远小

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AVYpSKth-1585667970660)(images/per1.jpg)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Cp6XgNAV-1585667970661)(images/per2.jpg)]

对于我们眼睛来说，离我们越近的房子，我们会感觉到这个房子越大，离我们越远的房子，就会感觉越小，其实房子的大小都是一样的，只是在视觉上的一种不同。

rotate旋转

rotateX 代表在X轴旋转  
正值表示推到
负值表示趴下

rotateY 代表在Y轴旋转

正值表示站在右边推门
负值表示站在左边推门

左手定则: 伸出你的左手  握拳 大拇指打开  大拇指就代表当前旋转的那根轴 (要保证方向  大拇指朝向的哪个方向就是正方向) 其他手指弯曲的方向就是正值旋转的方向

translateZ

代表元素的 前后关系 
正值: 向前走
负值: 往后退

注意: 想要看到translateZ的视觉效果  需要添加透视距  没有添加 元素是已经运行了  但是看不出来

transform-style

transform-style 属性规定如何在 3D 空间中呈现被嵌套的元素。注意这个属性只能给父元素添加。

flat:默认值，2d显示
preserve-3d: 3d显示

transform-style与perspective的区别

/*透视：透视只是相当于设置了一个距离，辅助我们查看3D效果的工具，*/
/*transform-style:preserve-3d:给父盒子添加，让子元素保留3D的位置，说白了，只有设置了preserve-3d，这个元素才能被称之为3d元素。 */

//一个3d元素可以没有perspective，但是不能没有transform-style

【3d导航案例.html】

【3D美女相册案例】

动画

动画可以通过设置多个节点来精确控制一个或者一组动画，常用来实现复杂的动画效果。

动画与过渡的区别：

1. 过渡必须触发，需要两个状态的改变。
2. 动画可以一直运行下去，不需要触发。实现效果与过渡差不多

使用一个动画的基本步骤：

//1.通过@keyframes指定动画序列
//2.通过百分比或者from/to将动画分割成多个节点
//3.在各个节点中分别定义样式
//4.通过animation将动画应用于相应的元素

###animation详解

animation是一个复合属性，一共有8个参数

animation-name:动画名称，由@keyframes定义的
animation-duration：动画的持续时间
animation-timing-function：动画的过渡类型
animation-delay：动画的延迟时间
animation-iteration-count：动画的循环次数
animation-direction：设置动画在循环中是否反向运动
animation-fill-mode：设置动画时间之外的状态
animattion-play-state:设置动画的状态。

帧动画

【案例：风车案例】

【案例：小鱼动画】

私有前缀

在标准还未确定时，部分浏览器已经根据最初草案实现了部分功能，为了与之后确定下来的标准进行兼容，所以每种浏览器使用了自己的私有前缀与标准进行区分，当标准确立后，各大浏览器将逐步支持不带前缀的css3新属性

目前已有很多私有前缀可以不写了，但为了兼容老版本的浏览器，可以仍沿用私有前缀和标准方法，逐渐过渡。

一般来说，CSS3主要是为移动端而生的，因此我们在移动端没必要写太多的前缀，因为移动端的ios和Android的浏览器都是webkit内核。

谷歌、苹果浏览器：-webkit-
火狐浏览器：-moz-
IE浏览器：-ms-
欧朋浏览器：-o-

div {
    width: 200px;
    height: 200px;
    background-color: pink;
    margin: 100px auto;

    /*谷歌浏览器和safari浏览器的前缀 -webkit-*/
    -webkit-transform: rotate(45deg);
    /*火狐浏览器的前缀 -moz-*/
    -moz-transform: rotate(45deg);
    /*ie浏览器的前缀 -ms-*/
    -ms-transform: rotate(45deg);
    /*opera浏览器的前缀 -o-*/
    -o-transform: rotate(45deg);
    /*规范化后的写法*/
    transform: rotate(45deg);
}