目录
旋转:rotatetransform:rotate(度数);
3D呈现transform-style:preserve-3d;
注意:所有的旋转都是按照坐标轴进行的,不要搞错了。(这是菜敏学的过程,自己的理解,若有错误,请指正。)
CSS 2D转换
移动:translate
transform:translate(x,y);
transform:translateX(n);transform:translateY(n);
特点:
- 定义2D转换中的移动,沿着X,Y轴移动。
- 不会影响其他元素的位置。
- 百分比是相对自身元素而言。
- 对行内标签没用。
案例:
这个可以制作相关的鼠标放上去,图标有轻微上移的效果。
(因为不会影响其他盒子的布局)
旋转:rotatetransform:rotate(度数);
特点:
1.单位deg,rotate(45deg)。
2.正角度,顺时针,逆角度,逆时针。
3.默认旋转中心为元素的中心点。
4.搭配过渡更香。
tips:设置2D转换的中心点transform-origin
语法:transform-origin:x y;
特点:
- 注意参数用空格隔开。
- X,y默认中心点元素的中心点(50%,50%)。
- 可以给x,y设置方位名词(top|bottom|left|right|center)。
缩放:scale
语法:transform:scale(x,y);
特点:
- 按照中心点缩放。
- 参数是倍数。(1,1相当于没放大。)
- 一个参数可以代替两个,0.5是缩小。
优势:
不会影响其他盒子,甚至可以设置中心点。
案例:鼠标经过,图片放大。
总结:2D搭配过渡加overflow:hidden绝绝子!
综合写法:位移,旋转,缩放。
CSS3动画(立体旋转)
用keyframes定义动画
@keyframes 动画名称{
0%{
width:100px;
}
100%{
width:200px;
}
}
元素使用动画
div {
width:200px;
height:200px;
/* 调用动画*/
animation-name:动画名称;
/*持续时间 */
animation-duration:持续时间;
}
属性:
animation-name: move;
animation-duration: 5s;
animation-timing-function: ease-in-out;(linear是匀速)
/* 经过多少时间开始动画,默认0s /
/ animation-delay: 5s;
/ animation-iteration-count: infinite; / 上面标示重复次数,无限次。就是自动循环 /
animation-direction: alternate; / 有两个属性值:normal(动画完直接闪现回原点),alternate(动画完逆动画回原点)
/ / animation-fill-mode: forwards;
/ / 动画结束后的状态,默认的是backwards,回到起始状态。
我们可以让他保持结束状态forwards / }
综合写法:
Animation:name 5s liner 2S infinite alternate;
案例:热点图案。
Tip:opacity是不透明度的意思。
速度曲线细节(模拟卡帧动画)
steps()就是分几步完成这个动画,就是卡帧动画一样。
CSS3 3D转换(近大远小)
3D位移translate3d(x,y,z)
加了透视才可以看见z轴移动的效果。
3D旋转rotate3d(x,y,z)
左手准则:
左手拇指指向X轴,其余手指弯曲方向就是旋转方向。
透视perspective
加了眼睛,来个明显的效果。3D效果必加透视。
透视就是在哪里加个眼睛,相对于父盒子而言,透视的距离就是对屏幕的距离,而垂直z的距离就是物体到屏幕的距离。
3D呈现transform-style:preserve-3d;
当我们希望按照我们的想法进行旋转展示时,呈现的还是3D旋转后的2D成像效果。转化为3D环境。