2D和3D的转换
一，2D转换（变换）transfrom
1. 2D移动 translate
属性值 translate(x,y) x正值向右移动 y正值向下移动
div{
transfrom:translate(50px,50px);
}
小结：
- translate 中的百分比单位是相对于自身元素的 translate:(50%,50%);
- translate 类似定位，不会影响到其他元素的位置
- 对行内标签没有效果
2. 2D旋转 rotate
属性值为 rotate(角度) 如 transform :rotate(30 deg) 顺时针方向旋转30度
div{
transfrom:rotate(0deg);
}
3. 转换中心 transfrom-origin 了解
- transform-origin :50% 50%; 默认值 元素的中心位置 百分比是相对于自身的宽度和高度
- transform-origin :top left; 左上角 和 transform-origin：0 0;相同
- transform-origin :50px 50px; 距离左上角 50px 50px 的位置
- transform-origin ：0; 只写一个值的时候 第二个值默认为 50%;
总结：设置旋转的中心，可以跟方位名词，也可以写具体的像素值。
4. 2D 缩放 scale
属性值为 scale(宽的倍数,高的倍数) 如 宽变为两倍，高变为3倍 transform :scale(2,3)
div{
transfrom:scale(2,3);
}
小结：
-
transform :scale (1,1) 放大一倍 相对于没有放大
-
transform :scale (2,2) 宽和高都放大了2倍
-
transform :scale (2) 只写一个参数 第二个参数则和第一个参数一样 相当于 scale(2,2)
-
transform :scale(0.5,0.5) 缩小
-
transform :scale(-2,-2) 反向放大2倍 很少用负数 容易让人产生误解
当我们同时有位移和其他属性时，我们需要把位移放到最前面。
二， 动画 animation
注意：动画和过渡的区别
过渡 只能看到一次变化过程 动画 可以设置变化次数 甚至是无数次
2.1 步骤
/* 1 声明动画函数 */
@keyframes move{
0%{
width:100px;
background-color:skyblue;
}
50%{
width:100px;
background-color:skyblue;
}
100%{
width:100px;
background-color:skyblue;
}
}
div{
width:200px;
height:200px;
background-color:green;
margin:100px auto;
/* 设置动画名*/
animation-name:move;
/* 设置动画播放的持续时间*/
animation-duration:2s;
}
@keyframes 里面可以放任何css样式
2.2 语法
2.2.1 动画名字
设置要使用的动画名 animation-name: xxx;
2.2.2 持续时间
设置动画播放的持续时间 animation-duration: 3s ;
2.2.3 速度曲线
和设置过渡的曲线一样 animation-timiing-function：linear;
- linear： 匀速
- steps() :指定了时间函数中的间隔数量（步数）
- ease： 慢-快-慢 默认值
- ease-in： 慢-快。
- ease-out： 快-慢。
- ease-in-out： 慢-快-慢。
2.2.4 延迟时间
animation-delay ：0s ;（鼠标放上去何时开始）
2.2.5 循环次数
设置动画播放的循环次数 animation-iteration-count: infinite;
infinite 为无限循环
2.2.6 循环方向
animation-direction （默认是normal）
在动画中定义循环方向的属性值为 ：
- normal 默认值
- reverse 反向运行
- alternate 正-反-正 （让动画走出去，然后再走回来，逆播放）
- alternate-reverse
- 以上与循环次数有关
2.2.7 动画等待或者结束的状态
animation-fifill-mode 设置动画在等待或者结束的时候的状态
forwards：动画结束后，元素样式停留在 100% 的样式
backwards： 在延迟等待的时间内，元素样式停留在 0% 的样式
both： 同时设置了 forwards和backwards两个属性值
2.2.8 暂停和播放
animation-play-state 控制 （鼠标放上去）播放 还是 暂停
running 播放 paused 暂停
2.3 animation 的复合写法
animation: name duration timing-function delay iteration-count direction fill-mode;
/*animation: 动画名字 持续时间 规定动画的运动状态 规定动画何时开始 */
简写属性里面不包含 animation-play-state
想要动画走回来，而不是直接跳回来：animation-derection：alternate
三，3D 转换
3.1 三维坐标系
- x轴 水平向右
- y轴 垂直向下
- z轴 垂直屏幕 由屏幕里面指向屏幕的外面
3.2 3d移动 translate3d
语法：
- transform:translate3d(x,y,z) 其中 x y z 分别指要移动的轴的方向的距离
- translform:translateX(100px) 仅仅是移动在x轴上移动
- translform:translateY(100px) 仅仅是移动在Y轴上移动
- translform:translateZ(100px) 仅仅是移动在Z轴上移动
注意：Z轴是垂直屏幕，由里指向外面 ，默认看不到元素在z轴的方向上移动，需要加上视距
3.3 视距 perspertive
- 设置人和物体的距离—视距 这个值是给物体的父元素
- 动态改变物体的 translateZ 即可观察效果
/* 父元素 */
body {
/* 视距 */
perspective: 1000px;
}
/* 目标 */
div {
width: 200px;
height: 200px;
background-color: aqua;
margin: 100px auto;
/* z轴的移动 */
transform: translateZ(0px);
}
四，3D的旋转 rotate3d
4.1 左手准则
比如要判断某元素沿着x轴是怎么旋转的
- 左手的手拇指指向 x轴的正方向
- 其余手指的弯曲方向就是该元素沿着x轴旋转的方向了
4.2 语法
- transform:rotateX(45deg); 沿着x轴正方向旋转 45度
- transform:rotateY(45deg) 沿着y轴正方向旋转 45deg
- transform:rotateZ(45deg) 沿着Z轴正方向旋转 45deg
- transform:rotate3d(x,y,z,deg) 沿着自定义轴旋转 deg为角度
五，3D的缩放 scale3d
3d缩放 可以控制元素 在 x轴，y轴，z轴上的缩放，也可以理解为 宽，高，厚度的缩放
5.1 语法
- transform: scale3d(1 ,1,2); 宽，高 缩放一倍，厚度放大两倍
- transform: scaleX(1) 只缩放宽
- transform: scaleY(1) 只缩放高
- transform: scaleZ(1) 只缩放厚
六，视距原点 perspective-origin
- 视距原点和视距一样，也是设置给要观察元素的父元素上
- perspective-origin:center center; 默认值是元素的中心点
- perspective-origin:10px； 指定了一个参数的时候，第二个参数默认为center 也就是50%；
- perspective-origin:10% %； 百分比都是相对于自身的宽度和高度
七，转换样式 transform-style
/* 开启3维立体环境 */
transform-style: preserve-3d;
