CSS3
初体验
transition过渡可以为一个元素在不同状态之间切换的时候定义不同的过渡效果。
div { width: 200px; height: 200px; background-color: pink; /* div所有的样式发生修改的时候，都有1s的过渡效果 */ transition: all 1s; } div:hover { width: 300px; }2D转换
transform: 转换，是CSS3最具颠覆性的几个特性之一，既可以用于2D转换，也可以用于3D转换。
transform：2D转换，元素在平面上实现移动、旋转、缩放、斜切等操作
transform主要有4种取值
translate: 平移scale： 缩放rotate： 旋转skew： 斜切（变形）
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接收的值是倍数，因此没有单位
scale可以是一个值，如果是一个值，不是说仅仅缩放宽度，高度也会等比例的缩放。
可以通过transform-origin设定旋转原点
【案例：放大镜效果】
rotate旋转
transform: rotate(360deg);//旋转360度 transform: rotate(-360deg);//逆时针旋转360度
注意：
单位是deg，角度，不是px
正值顺时针转，负值逆时针转
可以通过transition-origin设定旋转原点
【案例：扑克牌效果】
skew斜切(变形)
skew在实际开发中，是用的最少的一个属性。一般来说，x和y只会倾斜其中的一个
/*在水平方向倾斜30deg*/ transform: skewX(30deg); /*在垂直方向倾斜30deg*/ transform: skewY(30deg);
transform-origin转换原点
通过transform-origin可以设置转换的中心原点。
transform-origin: center center; transform-origin: 40px 40px;
转换合写问题
transform:translateX(800px) scale(1.5) rotate(360deg) ; //1. transform属性只能写一个，如果写了多个会覆盖 //2. transform属性可以连写，但是要注意rotate会影响坐标轴的改变
vscode常见快捷键
ctrl + C: 复制 ctrl + V: 粘贴 ctrl + X: 剪切 ctrl + A: 全选 ctrl + Z: 撤销 ctrl + S: 保存 alt + B: 快速打开浏览器 ctrl + shift + k: 删除一行 shift + alt + 下箭头 : 向下复制一行 shift + alt + 上箭头 : 向上复制一行 alt + 下箭头: 移动一行 ctrl + 回车键： 快速在下一行写代码
3D转换
transform:不仅可以2D转换，还可以进行3D转换。
3d转换transfrom的值主要有：
translate: 位移rotate： 旋转
坐标轴
用X、Y、Z分别表示空间的3个维度，三条轴互相垂直。注意+Y是向下的。
perspective透视
电脑显示屏是一个2D的平面，因为我们看不出来旋转的方向，通过perspective属性，可以定义3D 元素距视图的距离，单位是px。
说白了，设置了perspective属性后，就有了进大远小的效果了，在视觉上，让我们能看出来3d的效果。
注意：当为元素定义 perspective 属性时，其子元素会获得透视效果，而不是元素本身。
perspective：500px;
关于近大远小
对于我们眼睛来说，离我们越近的房子，我们会感觉到这个房子越大，离我们越远的房子，就会感觉越小，其实房子的大小都是一样的，只是在视觉上的一种不同。
rotate旋转
transform: rotate(45deg);// 让元素在平面2D中旋转 transform: rotateX(45deg);// 让元素沿着X轴转45度 transform: rotateY(45deg);// 让元素沿着Y轴转45度 transform: rotateZ(45deg);// 让元素沿着Z轴转45度
【01-3D转换-旋转.html】
问题：看不出来怎么转的，为什么现实生活中能够看出来？
translate平移
/*沿着X轴的正方向移动45px*/ transform: translateX(45px); /*沿着Y轴的正方向移动45px*/ transform: translateY(45px); /*沿着Y轴的正方向移动45px*/ transform: translateZ(45px);
【02-3D转换-平移.html】
【立方体.html】
transform-style
transform-style 属性规定如何在 3D 空间中呈现被嵌套的元素。注意这个属性只能给父元素添加。
flat:默认值，2d显示 preserve-3d: 3d显示
transform-style与perspective的区别
/*视距：perspective只是相当于设置了一个距离，辅助我们查看3D效果的工具，*/ /*preserve-3d:给父盒子添加，让子元素保留3D的位置，说白了，只有设置了preserve-3d，这个元素才能被称之为3d元素。 */ //一个3d元素可以没有perspective，但是不能没有transform-style
【3d导航案例.html】
【3D美女相册案例】
过渡
过渡的属性
如果两个状态发生改变，没有过渡，效果是瞬间变化的
如果加上了过渡，那么这个过程就会有动画的效果。
整个状态变化的过程是由浏览器来完成的，我们只需要关注开始状态与结束状态即可。
/*transition-property：设置过渡属性 /*也可以是width,height*/ transition-property:all; /*transition-duration:设置过渡时间*/ transition-duration:1s; /*transition-delay：设置过渡延时*/ transition-delay:2s; /*transition-timing-function:设置过渡的速度*/ /*linear，ease，ease-in，ease-out，ease-in-out， steps(10)*/ transition-timing-function:linear;
【演示：过渡基本语法】
属性合写
/* 属性 时间 延时 速度 */ transition: width 1s 3s linear;
过渡的注意点：
过渡必须要有两个状态的变化。
过渡可以写在A状态，也可以写在B状态，但是如果写在B状态，那么回来的时候，就没有过渡效果了。
动画
动画可以通过设置多个节点来精确控制一个或者一组动画，常用来实现复杂的动画效果。
动画与过渡的区别：
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); }
