CSS样式 -2D-3D-动画-浏览器前缀

2D转换(transform)

移动(translate)

(值可以为px也可以为百分比，不会影响其他元素位置相当于灵魂出窍)

1. 参考本身位置向X轴移动
   translateX(值px)
2. 参考本身位置向Y轴移动
   translateY(值px)
3. 参考本身位置XY轴都移动
   translate(X值px,Y值px)

<style>
        div{
            width: 200px;
            height: 200px;
            background-color: pink;
        }
        div:nth-child(1){
            transform:translate(200px,200px);
        }
</style>

旋转(rotate)

(值:xxdeg)
配合过渡(transition)使用

<style>
	img{
    	width: 200px;
        height: 200px;
        /* 过渡写到本身上，谁做动画给谁加 */
        transition: all 0.3s;
    }
    img:hover{
    	transform: rotate(360deg);
    }
</style>

旋转中心点(transform-origin)

transform-origin: left top;

    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            margin: 100px auto;
            transition: all 1s;
            /* 1.可以跟方位名词 */
            /* 2. 默认的是 50%  50%  等价于 center  center */
            /* 3. 可以是px 像素 */
            transform-origin: left top;
        }
        div:hover {
            transform: rotate(360deg);
        }
    </style>

缩放(scale)

    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            margin: 100px auto;
            /* transform-origin: left bottom; */
        }
        
        div:hover {
            /* 1. 里面写的数字不跟单位 就是倍数的意思 1 就是1倍  2就是 2倍 */
            /* transform: scale(x, y); */
            /* transform: scale(2, 2); */
            /* 2. 修改了宽度为原来的2倍  高度 不变 */
            /* transform: scale(2, 1); */
            /* 3. 等比例缩放 同时修改宽度和高度，我们有简单的写法  以下是 宽度修改了2倍，高度默认和第一个参数一样*/
            /* transform: scale(2); */
            /* 4. 我们可以进行缩小  小于1 就是缩放 */
            /* transform: scale(0.5, 0.5); */
            /* transform: scale(0.5); */
            /* 5. scale 的优势之处： 不会影响其他的盒子 而且可以设置缩放的中心点*/
            /* width: 300px;
            height: 300px; */
            transform: scale(2);
        }
    </style>

---

动画-animation

定义动画

第一种

@keyframes 动画名称{
0%{开始样式}
…
100%{结束样式}
}

<style>
	@keyframes 动画名称{
		0%{
			/*开始样式*/
		}
		........
		100%{
			/*结束样式*/
		}
	}
</style>

第二种

<style>
	@keyframes 动画名称
	   {
	   from {/*开始样式*/}
	   to {/*结束样式*/}
	}
</style>

调用动画

<style>
	div{
		/*调用动画的名称*/
		animation-name: 动画名称;
		/*动画运行一个周期共计时间*/
		animation-duration: 多少s;
		/*动画速度曲线*/
		/*
			默认值 低速开始，然后加快，结束变慢:ease 
			均速:linear
			低速开始:ease-in
			低速结束:ease-out
			低速开始并低速结束:ease-in-out
			steps(5) : 相当于5步完成此动画，一帧一帧，相当于老实手机充电格 
			cubic-bezier(n,n,n,n) ------
		*/
		animation-timing-function: linear;
		/*等待两秒，然后开始动画*/
		animation-delay: 2s;
		/*规定动画结束后状态*/
		/*
		回到起始：backwards
		停在结束位置：forwards
		*/
		animation-fill-mode: none;
		/*定义动画播放次数    infinite 循环播放*/
		animation-iteration-count: 1;
		/*定义动画下一周期是否逆运行*/
		/*
		默认值 不执行: normal
		执行逆运行: alternate
		*/
		animation-direction: normal;
		/*规定动画运行和暂停*/
		/*
		默认值  运行：running
		暂停：paused
		*/
		/*这个属性一般配合hover写，建议不与其他动画属性一起简写*/
		animation-play-state: running;
	}
</style>

动画属性简写
animation: name duration timing-function delay iteration-count direction fill-mode;
前面2个属性 name duration 一定要写

---

3D转换(transform)

Y：垂直上下(下+上-)
X：平行左右(右+左-)
Z：垂直屏幕(外+里-)

3D位移-translate3d

• transform:translateX(100px)在X轴移动
• transform:translateY(100px)在Y轴移动
• transform:translateZ(100px)在Z轴移动
• transform:translate3d(X,Y,Z)

3D旋转-rotate3d

• transform:rotateX(45deg)
• transform:rotateY(45deg)
• transform:rotate3d(X,Y,Z, 45deg)
• transform:rotate3d(1,1,0, 45deg)

透视-perspective

• 近大远小
• 单位为像素
• 透视写在父盒子上
• perspective与translateZ的区别
• • perspective是可视距离 translateZ是物体移动
• • 一般设置translateZ的值

3D呈现-transfrom-style

transfrom-style:flat默认值 不开启子盒子的3d空间
transfrom-style:preserve-3d; 开启子盒子的3d空间
注意：代码写给父盒子，但是影响的是子盒子。

---

浏览器前缀

• -moz- ：代表firefox浏览器私有属性
• -ms- ：代表ie浏览器私有属性
• -webkit- ：代表safari、chrome浏览器私有属性
• -o- ：代表Opera浏览器私有属性
  写法：-webkit-transform: rotateY(0deg) translateZ(300px);