旋转木马案例

最新推荐文章于 2022-09-22 19:29:59 发布

拾光漫漫可否达

最新推荐文章于 2022-09-22 19:29:59 发布

阅读量796

点赞数

分类专栏：前端学习

本文链接：https://blog.csdn.net/qq_45287715/article/details/116703204

版权

旋转木马案例

设计原理：
采用子绝父相、动画、3D旋转的知识
因为要做到旋转木马的效果：那么们可以利用到6张图片，这样每张图片平均60度，
注意事项

做到3D的立体效果，记得在父元素上加上透视
子孩子作了旋转之后，记得在父盒子里保留立体空间
要达到旋转木马的效果，必定要加上动画
代码示例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>旋转木马案例</title>
  <style>
      body {
          perspective: 1000px;
      }
      .box {
          position: relative;
          width: 400px;
          height: 300px;
          margin: 200px auto;
          /* 保留3D空间 */
          transform-style: preserve-3d;
          /* 调用动画 */
         animation: rotate 1

最低0.47元/天解锁文章

拾光漫漫可否达

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
旋转木马案例

旋转木马案例设计原理：采用子绝父相、动画、3D旋转的知识因为要做到旋转木马的效果：那么们可以利用到6张图片，这样每张图片平均60度，注意事项做到3D的立体效果，记得在父元素上加上透视子孩子作了旋转之后，记得在父盒子里保留立体空间要达到旋转木马的效果，必定要加上动画代码示例<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equi
复制链接

扫一扫