2D变形
CSS3新特性
使用transform,可以实现元素的位移、旋转、倾斜、缩放,甚至支持矩阵方式。
位移
属性值可以是translate(x,y),表示移动,x、y表示在x轴、y轴上移动的距离,单位为px
也可以使用translateX()表示在X轴上移动的距离,使用translateY()表示在 Y轴上移动的距离
translate()里面如果是百分比,移动时移动的是自己大小的百分比
缩放
属性值也可以是scale(x,y),表示缩放,x、y表示水平、垂直缩放的系数,1表示不变,如果只有一个参数,则表示宽度和高度都缩放。
旋转
属性值也可以是rotate(deg),deg是度数,单位是度(即deg),值为正表示顺时针,负表示逆时针
默认情况下旋转的中心点是元素的中心点,可以通过transform-origin设置旋转的中心点,其值可以是left、top、right、bottom,也可以是精确像素。
例如transform-origin:20px 30px;表示旋转中心点在距离上边20px,距离左边30px的地方
倾斜
使用skew(deg,deg),两个参数表示向x、y方向倾斜的度数,可以为负值。正值往左往上,负值往右往下。第二个参数不设置时默认为0
让定位的盒子居中对齐
/*水平居中*/
position:absolute;
left:50%;
transform:translate(-50%);
/*垂直居中*/
top:50%;
transform:translateY(-50%);
3D变形
也是使用transform属性
坐标:
rotateX()
沿着中心x轴立体旋转
属性值选择rotateX(deg)
可以通过transform-origin属性设置轴的位置
rotateY()
沿着中心Y轴立体旋转
属性值选择rotateY(deg)
可以通过transform-origin属性设置轴的位置
rotateZ()
沿着中心Z轴立体旋转
属性值选择rotateZ(deg)
可以通过transform-origin属性设置轴的位置
效果类似于普通旋转
透视
透视可以将一个2D平面在转换的过程中呈现3D效果
原理:近大远小
浏览器透视:将近大远小的所有图像透视在屏幕上
使用perspective属性实现,设置给父元素,属性值越大,效果越不明显
perspective属性即视距,模拟眼睛到屏幕的距离,表示眼睛和XY平面之间的距离
移动
沿x轴和沿Y轴移动和2D移动一样
沿Z轴移动使用translateZ(z),z表示移动的距离,可以为负,单位为px,为负值表示向负方向移动。
沿Z轴移动需要和透视配合,效果为大小变化。translateZ(z)中的z表示物体距离XY平面的距离,用来控制物体近大远小的效果,越大物体越大,z大于perspective的值时,看不到了
可以使用translate3d(x,y,z)综合描写3D移动。其中x,y可以是px,也可以是百分数,但z只能是px。
移动之后要回到原位置则使用translate3d(0,0,0),这也说明移动时的参照点始终是最初始的地方
backface-visibility
这个属性定义当元素不面向屏幕时是否可见。
实现图片翻转
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div{
width: 200px;
height: 200px;
margin: 100px auto;
position: relative;
}
img{
width: 200px;
height: 200px;
position: absolute;
top: 0;
left: 0;
transition: all 2s;
}
img:first-child{
z-index: 1;
/* 不是正面对向屏幕,则隐藏 */
backface-visibility:hidden;
}
div:hover img{
transform: rotateY(180deg);
}
</style>
</head>
<body>
<div>
<img class="first" src="img/i1.jpg">
<img class="last" src="img/i2.jpg" >
</div>
</body>
</html>
动画
CSS3新特性,可以通过设置多个节点来精确控制一个或一组动画,常用来实现复杂的动画效果
格式:animation:动画名称 动画时间 运动曲线 何时开始 播放次数 是否反方向
动画名称是自定义的,是否反方向指动画是否在下一周期逆向播放,取值有normal(正常方向)、reverse(反方向运行)、alternate(动画先正常运行再反方向运行,并且持续交替运行)、alternate-reverse(动画先反方向运行再正方向运行,并且持续交替运行)
播放次数设置为infinite表示持续运行
定义动画格式(这是单个动画):
@keyframes 动画名称{
from{}
to{}
}
定义多组动画示例:
@keyframes go{
0%{
transform: translate3d(0,0,0);
}
25%{
transform: translate3d(800px,0,0);
}
50%{
transform: translate3d(800px,300px,0);
}
75%{
transform: translate3d(0,300px,0);
}
100%{
transform: translate3d(0,0,0);
}
}
变化过程中,如果有多组变化并且都属于transform,可以写在一个transform中,并且用空格隔开
暂停动画使用animation-play-state:paused