1、首先准备一个HTML文档,文档中准备好两个图片,接下来会对这两个图片进行旋转。
2、然后对HTML中的内容定义一些样式,如下图所示,主要是标题以及ul的样式。
3、接下来就给图片所在的li定义宽高,如下图所示。
4、然后给图片设置过渡效果,过渡使用transition属性,如下图所示。
5、当鼠标悬停在图片上时,通过rotate给其设置变形,如下图所示,正数代表的是顺时针,负数代表的是逆时针。
6、最后运行程序,会看到如下图所示的效果,鼠标放在图片上会顺时针或者逆时针旋转。
1、首先新建一个html5文档,完成基本代码编写,如下图所示。
2、然后新建一个长100像素,高50像素背景为红色的长方形图层。
3、接着通过输入“border-radius:50%/50%”属性,如下图所示,将长方形图层设置成一个椭圆形。
4、接下来就是将椭圆旋转了,用“transform:rotate(30deg)”将椭圆旋转30度。
5、这样就实现了用css3将椭圆旋转,如下图所示预览即完成了。
做斜线运动
设置Y轴延时为动画时长的一半, 运动轨迹变成菱形
为了看起来有立体感添加scale属性,scale动画应该是X轴和Y轴的时间总和