cssday8

1. 2D转换

转换(transform)可以实现元素的位移、旋转、缩放等

• 移动：translate
• 旋转：rotate
• 缩放：scale

1.1 2D转换之移动translate

可以改变元素在页面中的位置，类似于定位

transform:translate(x,y);或者分开写
transform:translateX(n);
transform:translateY(n);

• 沿着x和y来移动的，可正可负,x和y的理解是自身来说，不是浏览器，请看下图
• translate最大优点：不会影响其他元素的位置
• translate中百分比单位是相对于自身元素而言，比如transform:translate(50%，50%);沿x轴移动了自身盒子宽度的一半，沿y轴移动了自身盒子高度的一半
• 对行内标签是没有效果的，行内块和块都可以
  
  
  

让一个盒子水平居中

1.2转换之旋转rotate

transform:rotate(度数);

• 度数的单位deg，角度为正时，顺时针，负为逆旋转，比如：rotate（45deg）
• 旋转的中心点是元素的中心点

过渡+rotate的应用
案例用代码实现倒三角：思路是将一个盒子的右边框和下边框留下，然后旋转45deg，再加过度特效

1.3设置转换中心点transform-origin

transform-origin:x y;

• x和y用空格隔开，就是盒子x轴和y轴的交叉点
• x y默认的转换中心点是元素的中心点（50% 50%）
• x 和y可以是像素或则方位名词（top bottom left right center ）比如：transform-origin:left top；表示转换的中心点是左上角的那个点

案例：当鼠标经过盒子的时候将子盒子转回来
注意rotate里面的值的设置，无论第一种状态还是第二种状态都是相对于原来来说的

1.4转换之缩放scale

transform:scale(x,y);

• x和y之间有逗号，x和y的值是不带单位的，比如（0.5，2）表示宽度（x轴)变为原来的0.5倍，高度变为原来的2倍
• 如果只写第一个参数的话，第二个参数跟第一个参数一样，例如：scale(2)；等价于scale（2，2）
• 默认缩放的中心点是元素的中心点，也就是说它是以中心向四周缩放，如果将中心点设为transform-origin：left bottom;那么中心点就是元素的左下角，缩放就会向上和向左缩放(一般都是用默认中心)
  -最重要的优点就是不影响其他盒子而witdth 和height都是会影响其他盒子的

案例：

1.5 2D转换的综合写法

可以同时使用多个转换

transform:translate(x,y) rotate(度数) scale(x,y)...

• 注意顺序会影响效果。（先旋转会改变坐标轴方向）
• 
• 记得一定要把移位放到最前

2.动画

过渡只是从一种状态到另一种状态，而动画更多的状态，更多的效果，
动画的使用分两步：
1.先定义动画
2.再调用动画

用keyframes定义动画

@keyframes 动画名称{
	0%{
	width:100px
	}
	100%{
	width:200px
	}
}
/*0%是初始状态，100%是最终状态，中间还可以再分但要整数，比如25% 50% 75%这样就分了5个状态，如果
整个动画的时间是10s，百分比是总时间的划分，25%*10s=2.5s也就是说2.5s要走到25%这个状态，以此类推
*/

• 也可以用关键字from和to，等价于0%和100%

动画的调用

div{
width:200px;
height:200px;
background-color:pink;
/*调用动画*/
animation-name:动画名称;
/*整个动画持续的时间*/
animation-duration:持续时间单位s;}

案例时间


常用属性及复合写法

animation: name duration timing-function delay iteration-count direction fill-mode;
动画名称 持续的时间 速度曲线 何时开始 重复的次数 是否反向 结束状态

• 简写属性里不包含animation-play-state
• 暂停动画animation-play-state:puased;常和鼠标经过一起用，鼠标一经过就让其暂停
• 盒子动画结束后，停在结束的位置：animation-fill-mode:forwards

速度曲线之steps

3. 3D

x轴：水平向右，右边是正值，左边是负值
y轴：垂直向下，下边是正值，上边是负值
z轴：垂直屏幕，往眼睛这边是正值，往里面是负值
主要知识点：

• 3D位移：translate3d(x,y,z)
• 3D旋转：rotate3d(x,y,z)
• 透视：perspective
• 3D呈现transform-style

3D位移

因为z轴是垂直屏幕，由里指向外面，所以默认是看不到元素在z轴的方向上移动
可以利用透视来观察

 translform:translateX(100px)：仅仅是在x轴上移动 
 translform:translateY(100px)：仅仅是在Y轴上移动
translform:translateZ(100px)：仅仅是在Z轴上移动（注意：translateZ一般用px单位）        
transform:translate3d(x,y,z);z一般都是px为单位

透视perspective

• 要想看到网页产生的3D效果需要借助透视，透视就是模拟人眼到屏幕之间的距离，也称
  视距，视距越大看到的图形就越小，视距越小看到的图形就会越大，近小远大
• 透视单位是px
• 透视写在被观察元素的父盒子上面例如：perspective:100px;
• 距离视觉点越近的在电脑平面成像越大，越远成像越小
• 可以先定好视距，然后再浏览器上调试z轴，，z越大，离模拟眼睛就越大，
  
  一般都是固定视距
  

3D旋转

transform:rotateX(45deg)：沿着x轴正方向旋转 45度
transform:rotateY(45deg) ：沿着y轴正方向旋转 45deg
transform:rotateZ(45deg) ：沿着Z轴正方向旋转 45deg
transform:rotate3d(x,y,z,deg)： 沿着自定义轴旋转 deg为角度（了解即可）
左手准则
左手的手拇指指向 x轴的正方向
其余手指的弯曲方向就是该元素沿着x轴旋转的方向（正值）

3D呈现 transfrom-style

• 控制子元素是否开启三维立体环境。。
• transform-style: flat 子元素不开启3d立体空间 默认的
• transform-style: preserve-3d; 子元素开启立体空间
• 代码写给父级，但是影响的是子盒子 这个属性很重要，后面必用
  案例：两面翻转的盒子
  案例：3D导航栏
  
  
  
  
  
  旋转木马案例