开发工具与关键技术:前端
作者:黄志鹏
撰写时间:2019/1/17
在前端的css3中它为我们提供了transform属性和 rotate()函数来实现二维旋转.
下面是二维旋转的代码截图
下面是浏览器的输出截图
相较于二维旋转,那么3d旋转是否更好玩些呢?其实二维旋转与3d旋转所写的代码一样,只需把3d旋转的代码布局改一下就ok啦
首先在html布局那边从yiyi这个类中加上一个子元素erer,再从erer这个类中加上一个div.。
然后在yiyi这个类中加上transform: rotatex(65deg);意思是沿X轴旋转65度。
然后让其子元素设置相同的宽高和圆角效果,这时yiyi和erer重叠在一起,然后在erer类中调用css3中的关键帧让其不断旋转,之后在erer中的div设置其样式,这时yiyi,erer,div,一起缓缓旋转。
下面是3d旋转代码的截图
通过截图我们误以为看出蓝色虚线椭圆沿着灰色实线椭圆缓缓旋转,实则是所有类一起旋转。
下面是浏览器的输出的截图