移动
移动 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>