形变
2D形变
matrix()： 以一个含六值的(a,b,c,d,e,f)变换矩阵的形式指定一个2D变换，相当于直接应用一个[a,b,c,d,e,f]变换矩阵 translate()： 指定对象的2D translation（2D平移）。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认值为0 translatex()： 指定对象X轴（水平方向）的平移 translatey()： 指定对象Y轴（垂直方向）的平移 rotate()： 指定对象的2D rotation（2D旋转），需先有 <' transform-origin '> 属性的定义 scale()： 指定对象的2D scale（2D缩放）。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认取第一个参数的值 scalex()： 指定对象X轴的（水平方向）缩放 scaley()： 指定对象Y轴的（垂直方向）缩放 skew()： 指定对象skew transformation（斜切扭曲）。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认值为0 skewx()： 指定对象X轴的（水平方向）扭曲 skewy()： 指定对象Y轴的（垂直方向）扭曲
运用实例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>2d形变</title>
<style type="text/css">
div {
50px;
height: 50px;
background-color: red;
margin: 30px auto 0;
text-align: center;
line-height: 50px;
transition: 3s;
/*形变参考点: 三轴交界点*/
/*transform-origin: 0 0;*/
}
.d1 {
/*形变: 只操作自身显示图层(让图层发生变化), 不影响盒子布局*/
/*注: 不拿形变来布局, 只能形变来完成动画*/
/*transform: rotate(45deg);*/
/*transform: scale(3);*/
/*transform: translateY(100px);*/
/*margin-top: 50px;*/
}
.d2:hover {
/*旋转: 旋转的是角度 deg*/
/*transform: rotate(720deg);*/
transform: rotateZ(7200deg);
}
.d3:hover {
transform: rotateY(7200deg);
}
.d4:hover {
/*偏移: 偏移的是距离 px*/
/*如果需要发送多状态形变,需要分别写在一条transform属性设置中*/
/*各个形变之间用空格隔开*/
/*顺序一般会影响结果*/
/*transform: translateY(100px) translateX(100px);*/
/*不能这么书写: 所有形变效果的实现都是对transform一个属性进行设置*/
/*下方这么设置,第二次赋值会覆盖第一次赋值(只能保留最后一次赋值)*/
transform: translateX(100px);
transform: translateY(100px);
}
.d5:hover {
transform: translateX(100px) rotate(7200deg);
/*transform: rotate(7200deg) translateX(100px);*/
}
.d6:hover {
/*缩放: 缩放的是比例 无单位*/
transform: scale(3, 0.5);
/*transform: scaleX(3) scaleY(0.5);*/
}
.d7:hover {
transform: translateX(100px) rotate(720deg) scale(2);
}
.d8:hover {
margin-left: 1200px;
}
</style>
</head>
<body>
<div class="d1">1</div>
<div class="d2">2</div>
<div class="d3">3</div>
<div class="d4">4</div>
<div class="d5">5</div>
<div class="d6">6</div>
<div class="d7">7</div>
<div class="d8"></div>
</body>
</html>
小米形变案例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>小米形变案例</title>
<style type="text/css">
.wrapper {
230px;
height: 300px;
background-color: #ddd;
margin: 50px auto;
}
.box {
230px;
height: 300px;
background-color: yellow;
transition: .3s;
position: relative;
}
.footer {
230px;
height: 0;
overflow: hidden;
background-color: red;
transition: .3s;
position: absolute;
bottom: 0;
}
.wrapper:hover .box {
transform: translateY(-5px);
box-shadow: 0 5px 10px 2px #ddd;
}
.wrapper:hover .footer {
height: 80px;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="box">
<div class="footer">12345</div>
</div>
</div>
</body>
</html>
3d形变
matrix3d()： 以一个4x4矩阵的形式指定一个3D变换 translate3d()： 指定对象的3D位移。第1个参数对应X轴，第2个参数对应Y轴，第3个参数对应Z轴，参数不允许省略 translatez()： 指定对象Z轴的平移 rotate3d()： 指定对象的3D旋转角度，其中前3个参数分别表示旋转的方向x,y,z，第4个参数表示旋转的角度，参数不允许省略 rotatex()： 指定对象在x轴上的旋转角度 rotatey()： 指定对象在y轴上的旋转角度 rotatez()： 指定对象在z轴上的旋转角度 scale3d()： 指定对象的3D缩放。第1个参数对应X轴，第2个参数对应Y轴，第3个参数对应Z轴，参数不允许省略 scalez()： 指定对象的z轴缩放 perspective()： 指定透视距离
动画
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>动画</title>
<style type="text/css">
.box {
100px;
height: 100px;
background-color: red;
margin-left: 200px;
margin-top: 50px;
}
/*实现动画*/
/*1.设置动画体*/
/*2.设置动画属性*/
/*1.设置动画体
@keyframes 动画名 {
多种状态的动画体
}
*/
/*2.设置动画属性
.box {
animation: 动画相关属性;
}
*/
@keyframes hehe {
/*起点省略采用的就是初始状态*/
0% {}
33.3% {
margin-left: 800px;
margin-top: 50px;
}
66.6% {
margin-left: 500px;
margin-top: 300px;
}
/*终点需要设置*/
100% {
margin-left: 200px;
margin-top: 50px;
}
}
.box {
/*animation: 动画名 时间 运动次数(无限次:infinite) 运动曲线*/
animation: hehe 2s 1 linear;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
更及详细的请参考CSS参考手册 http://css.doyoe.com/