erspective视角1.5

目标使用transform属性实现元素在空间内的位移、旋转、缩放等效果

1.1

2D转换能够改变元素X轴和Y轴方向特性3D转换还能改变Z轴方向特性并且可以通过视角设置透视关系使元素具有透视效果

1.2

答不能perspective只增加近大远小、近实远虚的视觉效果

实现方法

preserve-3d;添加旋转属性为了便于观察效果案例完成后删除即可

a标签

a标签定位子绝父相英文部分添加旋转和位移样式中文部分添加位移样式

添加hover状态旋转切换效果

动画是CSS3中具有颠覆性的特征之一有通过设置多个节点来精确控制一个或一组动画常用来实现复杂的动画效果。

动画效果实现多个状态间的变化过程动画过程可控重复播放、最终画面、是否暂停

2.2

0%是动画的开始100%是动画的完成。

这样的规则就是动画序列在

keyframes

中规定某项CSS样式就能创建由当前样式逐渐改为新样式的动画效果动画是元素从一种样式逐渐变化为另外一种样式的效果。

你可以改变任意多的样式任意多的次数请使用百分比来规定变化发生的时间或者关键词

from

initialscale1.0titleDocument/titlestyle/*

动画序列

动画名称和动画时长必须赋值取值不分先后顺序如果有2个时间值第一个时间表示动画时长第二个时间表示延迟时间

2.3

initial-scale1.0titleDocument/titlestylekeyframes

move

若需要逆向播放则使用alternate*/animation-direction:

alternate;/*

添加速度曲线steps(N)N与精灵图上小图个数相同添加无限重复效果

多组动画

思考如果想让小人跑远一些该如何实现答精灵动画的同时添加盒子位移动画

样式代码