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

作者:黄志鹏

撰写时间: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旋转

相关文章:

  • 2022-01-18
  • 2021-06-09
  • 2021-07-08
  • 2021-11-07
  • 2021-12-12
  • 2021-08-28
猜你喜欢
  • 2021-05-07
  • 2021-05-27
  • 2021-10-26
  • 2022-01-02
  • 2021-04-13
相关资源
相似解决方案