1.CSS3 2D转换
转换(transform)是CSS3中具有颠覆性的特征之一,可以实现元素的唯一、旋转、缩放等效果
- 移动:translate
- 旋转:rotate
- 缩放:scale
1.移动
transform:translate(x,y); 或者分开写
transform:translateX(n);
transform:translateY(n);
- 不会影响到其他元素的位置
- translate中的百分比单位是相对于自身元素的translate:(50%,50%)
- translate对于行内元素是无效的
2.旋转
transform:rotate(度数)
- rotate里面跟度数,单位是 deg 比如 rotate(45deg)
- 角度为正时,顺时针,负时,为逆时针
- 默认旋转的中心点是元素的中心点
2D设置转换中心点 transform-origin
transform-origin:x y;
- x y 默认转换的中心点是元素的中心点(50% 50%)
- 还可以给x y 设置 像素 或者 方位名词( top bottom left right center)
3.缩放scale
transform:scale(x,y);
4.2D转换综合写法
- 同时使用多个转换,其格式为:transform:translate() rotate() scale()…等
- 其顺序会影响转换的效果
transform:translate(150px,50px) totate(180deg) scale(1.2)
2.CSS3动画
动画(animation)是CSS3中就有颠覆性的特征之一,可通过设置多个节点来精确控制一个或一组动画,常用来实现复杂的动画效果
制作动画分为两步:
1.先定义动画
2.再使用(调用)动画
1.用keyframes定义动画(类似定义类选择器)
@keyframs 动画名称{
0%{
width:100px;
}
100%{
width:200px;
}
}
动画序列
- 0%是动画的开始,100%是动画的完成,这样的规则就是动画序列
- 在@keyframs中规定某项CSS样式,就能创建由当前样式逐渐改变为新样式的动画效果
- 可以改变任意多的样式任意多次
- 使用百分比或关键词 ”from“ 和 ”to“ 规定变化发生的时间
2.元素使用动画
div{
width:200px;
height:200px;
backagecolor:pink;
margin: 100px auto;
animation-name:动画名称;
animation-duration:持续时间;
}
3.动画简写属性
animation:动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或者结束的状态;
animation:myfirst 5s linear 2s infinite alternate;
- 简写属性里不包含 animation-play-state
- 想要动画走回来,而不是直接跳回:animation-direction :alternate
- 盒子动画结束后,停在结束位置 :animation-fill-mode :forwards
4.速度曲线细节
animation-timing-function
值 | 描述 |
---|---|
linear | 动画从头到尾的速度是相同的匀速 |
ease | 默认,动画以低速开始,然后加快,在结束前变慢 |
ease-in | 动画以低速开始 |
ease-out | 动画以低速结束 |
ease-in-out | 动画以低速开始和结束 |
steps() | 指定了时间函数中的间隔数量(步长) |
2.CSS3 3D转换translate3d
- 3D位移:translate 3d(x,y,z)
- 3D旋转:rotate 3d(x,y,z)
- 透视:perspective
- 3D呈现 transfrom-style
1.3D移动
- translform:translateX(100px):仅仅是在x轴上移动
- translform:translateY(100px):仅仅是在y轴上移动
- translform:translateZ(100px):仅仅是在z轴上移动
- translform:translate 3d(x,y,z)
2.透视perspective
设置元素被查看位置的视图:
div
{
perspective: 500;
-webkit-perspective: 500; /* Safari 和 Chrome */
}
3.3D旋转 rotare3d
- transform :rotateX(45deg):沿着x轴正方向旋转 45 度
- transform :rotateY(45deg):沿着y轴正方向旋转 45 度
- transform :rotateZ(45deg):沿着z轴正方向旋转 45 度
- transform :rotate 3d(x,y,z,deg):沿着自定义轴旋转 deg 为角度
4.3D呈现 transfrom-style
- 控制子元素是否开启三维立体环境
- transfrom-style :flat子元素不开启3d立体空间 默认的
- transfrom - style :preserve - 3d; 子元素开启立体空间