移动端布局（3D转换、动画）

记录一下自己学习的内容，欢迎大家评论与指正。

3D转换

3D坐标系

• X 轴 往右越大，是正值， 否则反之

• Y 轴 往下越大，是正值，否则反之

• Z轴 （指向我们）越大，是正值，否则反之

3D位移

语法格式：

//符合写法
transform: translate3d(x, y,z);  
//分开写
transform: translateX(100px);
transform: translateY(100px);
transform: translateZ(100px);

透视

语法格式：

perspective: 800px;  

注意

1. 取值范围经常在 800px ~ 1200px 之间。
2. 一定给父亲添加
3. 透视距离也称为视距，所谓的视距就是人的眼睛到屏幕的距离。

3D旋转

旋转-rotate3d: 指可以让元素在三维平面内沿着x轴，y轴，z轴或自定义轴进行旋转 语法

语法格式：

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

//y轴沿着正方向旋转45度
transform:rotateY(45deg)   

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

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

缩放

语法格式：

scale(width(宽)的倍数,height(高)的倍数)
scaleX()
scaleY()
scaleZ()
scale3d(x,y,z)    

<br>

立体呈现

让子盒子在父盒子内有空间的展示，此时可以给父亲添加
语法格式：

transform-style: preserve-3d;   

 

动画

定义动画

keyframes定义动画

//百分比
@keyframes 动画名称{
	0%{
		样式
	}

	100%{
		样式
	}  

//from  to
@keyframes dance {

from {
    transform: scale(1)
}

to {
    transform: scale(1.5)
}

}

1. 0%是动画的开始，100%是动画结尾。这样的规则就是动画序列
2. 在@keyframes中规定某项CSS样式，就能创建由当前样式逐渐改为新样式的动画效果
3. 动画是使元素从一种样式逐渐变化为另一种样式的效果，可以改变任意多的样式以及次数
4. 用百分比规定变化发生的时间，或用关键词"from"和"to"，等同于0%和100%

动画使用

语法格式：

属性值可以不用按照顺序书写

属性：

 

动画速度曲线

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

 

参考
动画+3D转换笔记_blink555的博客-CSDN博客