开发工具与关键技术:前端

作者:黄志鹏

撰写时间:2019/1/17

在前端的css3中它为我们提供了transform属性和 rotate()函数来实现二维旋转.

下面是二维旋转的代码截图

化二维旋转为3d旋转

下面是浏览器的输出截图

化二维旋转为3d旋转

相较于二维旋转,那么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旋转代码的截图
化二维旋转为3d旋转
化二维旋转为3d旋转

通过截图我们误以为看出蓝色虚线椭圆沿着灰色实线椭圆缓缓旋转,实则是所有类一起旋转。

下面是浏览器的输出的截图

化二维旋转为3d旋转

化二维旋转为3d旋转

相关文章: