化二维旋转为3d旋转

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

作者：黄志鹏

撰写时间：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旋转代码的截图

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

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