css变换

移动

移动 translate(x,y)
    水平移动 translateX()
    垂直移动 translateY()

水平移动500像素

transform: translateX(500px);

垂直移动500像素

transform: translateY(500px); 

对角线移动

transform: translate(500px,400px);

旋转

旋转 rotate（）
    rotateX(数值+角度deg) 绕x轴旋转
    rotateY(数值+角度deg) 绕y轴旋转
    rotateZ(数值+角度deg) 绕z轴旋转
透视    perspective

perspective: 2000px;

.box{
	width: 400px;
	height: 300px;
	border: 1px solid red;
	perspective: 2000px;
}
.box:hover img{
	/* transform: rotateX(180deg); */
	/* transform: rotateY(-180deg); */
	/* transform: rotateZ(180deg); */
	transform: rotate(-180deg);
}
.box img{
	width: 400px;
	transition: 1s;
}

缩放 

缩放
        scale（x）等比例缩放
        scale（x，y）
    scaleX(缩放倍数) x方向
    scaleY(缩放倍数) y方向

            .box{
				width: 500px;
				height: 500px;
				box-shadow: 0 0 0 2px #008000;
			}
			.box img{
				width: 300px;
				transition: 1s;
				transform-origin: left center; 
			}
			.box:hover img{
				/* transform: scaleX(1.2); */
				/* transform: scaleY(1.2); */
				/*transform: scale(1.2);*/
				transform: scale(1.2,1.5);
			}

扭曲 

扭曲 skew()
    skewX(数值+单位deg)
    skewY(数值+单位deg) 

动画

关键帧

    <style type="text/css">
			/* @keyframes myrun{
				from{}
				to{}
			} */
			@keyframes myrun{
				0%{
					transform: translateX(0);
				}
				
				50%{
					transform: translateY(400px);
				}
				70%{
					transform: translateY(600px);
				}
				100%{
					transform: translateY(800px);
				}
			}
			.box{
				width: 100px;
				height: 100px;
				border-radius: 50%;
				background-image: radial-gradient(#fff,#000);
				animation: myrun 2s linear infinite alternate;
				/* animation-name: myrun; */
				/* animation-duration: 1s; */
				/* animation-timing-function: ease-in; */
				/* animation-delay: 1s; */
				/* animation-iteration-count: 2;动画的播放次数 */
				/* animation-iteration-count: infinite; */
				/* animation-direction: normal;动画方向从开始到结束 */
				/* animation-direction: reverse;反向 从结束到开始 */
				/* animation-direction: alternate;循环 从开始到结束再到开始 */
			}
		</style>