css 多张图片围绕中心点旋转

已于 2023-08-10 17:52:04 修改
阅读量107 收藏
点赞数
文章标签： css css3 前端
于 2023-08-10 14:17:34 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_27018017/article/details/132208452
版权
文章详细描述了如何使用HTML和CSS3（包括transform,perspective,transition和animation属性）创建一个带有视差滚动效果的3D旋转展示，包含多个球体和基础元素的动画变换。
摘要由CSDN通过智能技术生成

效果图
在这里插入图片描述

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    #content {
        margin-top: 100px;
  width: 100%;
  height: 100%;
}

.ball {
  position: relative;
  overflow: visible !important;
}

.ditu {
  width: 127px !important;
    height: 67px !important;
    left: -12px;
    top: 86px;
  position: absolute;
}

.fdj {
  width: 82px !important;
    height: 119px !important;
  margin-left: 10px;
}

.span {
  position: absolute;
  color: black;
    left: 18px;
    top: -33px;
  font-size: 12px;
}
/*旋转部分、、、、、、、、、、、、、、、、、、、、、、、、、、*/
.section3 {
    position: relative;
    top: -65px;
    left: 30px;
}

.u_p3d {
    -webkit-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

.section3 .ui_base {
    position: relative;
    top: 90px;
    left: 280px;
    width: 400px;
    height: 0px;
    -webkit-perspective: 1000px;
    -moz-perspective: 1000px;
    -ms-perspective: 1000px;
    -o-perspective: 1000px;
    perspective: 1000px;
    -webkit-perspective-origin: 50% 0%;
    -moz-perspective-origin: 50% 0%;
    -o-perspective-origin: 50% 0%;
    -ms-perspective-origin: 50% 0%;
    perspective-origin: 50% 0%
}

.section3 .ball_c {
    -webkit-transform-origin: 50% 50%;
    -moz-transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    -o-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    position: absolute;
    width: 225px;
    height: 157px;
    line-height: 157px;
    text-align: center;
    left: 90px;
    top: 100px;
}

.section3 .ball_c img {
    width: 125px;
    height: 125px;
    border-radius: 10px;
}

.section3 .ball_c p {
    margin-top: -70px;
}

.section3 .ball_c p a {
    font-size: 19px;
    font-family: ""
}

.section3 .base {
    -webkit-transform: rotateX(80deg) rotateY(-10deg);
    -moz-transform: rotateX(80deg) rotateY(-10deg);
    -o-transform: rotateX(80deg) rotateY(-10deg);
    -ms-transform: rotateX(80deg) rotateY(-10deg);
    transform: rotateX(80deg) rotateY(-10deg);
    position: relative;
    width: 350px;
    height: 350px;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    top: -38px;
    left: 40px;
}

.section3 .ball_base {
    -webkit-transform-origin: 225px 0px;
    -moz-transform-origin: 225px 0px;
    -ms-transform-origin: 225px 0px;
    -o-transform-origin: 225px 0px;
    transform-origin: 225px 0px;
    position: absolute;
    top: 175px;
    left: -50px;
    width: 225px;
    height: 127px
}

.section3 .ball_1 {
    -webkit-transform: rotateX(-90deg) rotateY(0deg) translateY(-70px);
    -o-transform: rotateX(-90deg) rotateY(0deg) translateY(-70px);
    -moz-transform: rotateX(-90deg) rotateY(0deg) translateY(-70px);
    -ms-transform: rotateX(-90deg) rotateY(0deg) translateY(-70px);
    transform: rotateX(-90deg) rotateY(0deg) translateY(-70px)
}

.section3 .ball_2 {
    -webkit-transform: rotateX(-90deg) rotateY(60deg) translateY(-70px);
    -moz-transform: rotateX(-90deg) rotateY(60deg) translateY(-70px);
    -o-transform: rotateX(-90deg) rotateY(60deg) translateY(-70px);
    -ms-transform: rotateX(-90deg) rotateY(60deg) translateY(-70px);
    transform: rotateX(-90deg) rotateY(60deg) translateY(-70px)
}

.section3 .ball_3 {
    -webkit-transform: rotateX(-90deg) rotateY(120deg) translateY(-70px);
    -o-transform: rotateX(-90deg) rotateY(120deg) translateY(-70px);
    -ms-transform: rotateX(-90deg) rotateY(120deg) translateY(-70px);
    -moz-transform: rotateX(-90deg) rotateY(120deg) translateY(-70px);
    transform: rotateX(-90deg) rotateY(120deg) translateY(-70px)
}

.section3 .ball_4 {
    -webkit-transform: rotateX(-90deg) rotateY(180deg) translateY(-70px);
    -moz-transform: rotateX(-90deg) rotateY(180deg) translateY(-70px);
    -ms-transform: rotateX(-90deg) rotateY(180deg) translateY(-70px);
    -o-transform: rotateX(-90deg) rotateY(180deg) translateY(-70px);
    transform: rotateX(-90deg) rotateY(180deg) translateY(-70px)
}

.section3 .ball_5 {
    -webkit-transform: rotateX(-90deg) rotateY(240deg) translateY(-70px);
    -moz-transform: rotateX(-90deg) rotateY(240deg) translateY(-70px);
    -o-transform: rotateX(-90deg) rotateY(240deg) translateY(-70px);
    -ms-transform: rotateX(-90deg) rotateY(240deg) translateY(-70px);
    transform: rotateX(-90deg) rotateY(240deg) translateY(-70px)
}

.section3 .ball_6 {
    -webkit-transform: rotateX(-90deg) rotateY(300deg) translateY(-70px);
    -ms-transform: rotateX(-90deg) rotateY(300deg) translateY(-70px);
    -o-transform: rotateX(-90deg) rotateY(300deg) translateY(-70px);
    -moz-transform: rotateX(-90deg) rotateY(300deg) translateY(-70px);
    transform: rotateX(-90deg) rotateY(300deg) translateY(-70px)
}

.section3 .ball_1 .ball {
    -webkit-transform: rotateY(10deg) rotateZ(0deg);;
    -moz-transform: rotateY(10deg) rotateZ(0deg);;
    -o-transform: rotateY(10deg) rotateZ(0deg);;
    -ms-transform: rotateY(10deg) rotateZ(0deg);;
    transform: rotateY(10deg) rotateZ(0deg);
}

.section3 .ball_2 .ball {
    -webkit-transform: rotateY(-50deg) rotateZ(0deg);;
    -o-transform: rotateY(-50deg) rotateZ(0deg);;
    -ms-transform: rotateY(-50deg) rotateZ(0deg);;
    -moz-transform: rotateY(-50deg) rotateZ(0deg);;
    transform: rotateY(-50deg) rotateZ(0deg);
}

.section3 .ball_3 .ball {
    -webkit-transform: rotateY(-110deg) rotateZ(0deg);;
    -o-transform: rotateY(-110deg) rotateZ(0deg);;
    -moz-transform: rotateY(-110deg) rotateZ(0deg);;
    -ms-transform: rotateY(-110deg) rotateZ(0deg);;
    transform: rotateY(-110deg) rotateZ(0deg);
}

.section3 .ball_4 .ball {
    -webkit-transform: rotateY(-170deg) rotateZ(0deg);;
    -o-transform: rotateY(-170deg) rotateZ(0deg);;
    -moz-transform: rotateY(-170deg) rotateZ(0deg);;
    -ms-transform: rotateY(-170deg) rotateZ(0deg);;
    transform: rotateY(-170deg) rotateZ(0deg);
}

.section3 .ball_5 .ball {
    -webkit-transform: rotateY(-230deg) rotateZ(0deg);;
    -o-transform: rotateY(-230deg) rotateZ(0deg);;
    -moz-transform: rotateY(-230deg) rotateZ(0deg);;
    -ms-transform: rotateY(-230deg) rotateZ(0deg);;
    transform: rotateY(-230deg) rotateZ(0deg);
}

.section3 .ball_6 .ball {
    -webkit-transform: rotateY(-290deg) rotateZ(0deg);;
    -o-transform: rotateY(-290deg) rotateZ(0deg);;
    -ms-transform: rotateY(-290deg) rotateZ(0deg);;
    -moz-transform: rotateY(-290deg) rotateZ(0deg);;
    transform: rotateY(-290deg) rotateZ(0deg);
}

.section3 .ball {
    -webkit-transition: all 2s ease-out 0ms;
    -o-transition: all 2s ease-out 0ms;
    -moz-transition: all 2s ease-out 0ms;
    -ms-transition: all 2s ease-out 0ms;
    transition: all 2s ease-out 0ms;
    -webkit-transform-origin: 50% 50%;
    -o-transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    -moz-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    position: absolute;
    left: -200px;
    top: -30px;
    overflow: hidden;
}

.section3 .ball img {
    width: 110px;
    height: 110px;
}

.section3 .ball_1 .ball {
    -webkit-transition-delay: 1100ms;
    -o-transition-delay: 1100ms;
    -moz-transition-delay: 1100ms;
    -ms-transition-delay: 1100ms;
    transition-delay: 1100ms;
}

.section3 .ball_2 .ball {
    -webkit-transition-delay: 900ms;
    -moz-transition-delay: 900ms;
    -o-transition-delay: 900ms;
    -ms-transition-delay: 900ms;
    transition-delay: 900ms;
}

.section3 .ball_3 .ball {
    -webkit-transition-delay: 700ms;
    -o-transition-delay: 700ms;
    -ms-transition-delay: 700ms;
    -moz-transition-delay: 700ms;
    transition-delay: 700ms;
}

.section3 .ball_4 .ball {
    -webkit-transition-delay: 500ms;
    -o-transition-delay: 500ms;
    -ms-transition-delay: 500ms;
    -moz-transition-delay: 500ms;
    transition-delay: 500ms;
}

.section3 .ball_5 .ball {
    -webkit-transition-delay: 300ms;
    -moz-transition-delay: 300ms;
    -ms-transition-delay: 300ms;
    -o-transition-delay: 300ms;
    transition-delay: 300ms;
}

.section3 .ball_6 .ball {
    -webkit-transition-delay: 100ms;
    -o-transition-delay: 100ms;
    -ms-transition-delay: 100ms;
    -moz-transition-delay: 100ms;
    transition-delay: 100ms;
}

.section3 .ball_1 .ball {
    -webkit-animation: cir1 28s linear 0s infinite;
    -o-animation: cir1 28s linear 0s infinite;
    -ms-animation: cir1 28s linear 0s infinite;
    -moz-animation: cir1 28s linear 0s infinite;
    animation: cir1 28s linear 0s infinite
}

.section3 .ball_2 .ball {
    -webkit-animation: cir2 28s linear 0s infinite;
    -o-animation: cir2 28s linear 0s infinite;
    -ms-animation: cir2 28s linear 0s infinite;
    -moz-animation: cir2 28s linear 0s infinite;
    animation: cir2 28s linear 0s infinite
}

.section3 .ball_3 .ball {
    -webkit-animation: cir3 28s linear 0s infinite;
    -o-animation: cir3 28s linear 0s infinite;
    -ms-animation: cir3 28s linear 0s infinite;
    -moz-animation: cir3 28s linear 0s infinite;
    animation: cir3 28s linear 0s infinite
}

.section3 .ball_4 .ball {
    -webkit-animation: cir4 28s linear 0s infinite;
    -o-animation: cir4 28s linear 0s infinite;
    -ms-animation: cir4 28s linear 0s infinite;
    -moz-animation: cir4 28s linear 0s infinite;
    animation: cir4 28s linear 0s infinite
}

.section3 .ball_5 .ball {
    -webkit-animation: cir5 28s linear 0s infinite;
    -o-animation: cir5 28s linear 0s infinite;
    -ms-animation: cir5 28s linear 0s infinite;
    -moz-animation: cir5 28s linear 0s infinite;
    animation: cir5 28s linear 0s infinite
}

.section3 .ball_6 .ball {
    -webkit-animation: cir6 28s linear 0s infinite;
    -o-animation: cir6 28s linear 0s infinite;
    -ms-animation: cir6 28s linear 0s infinite;
    -moz-animation: cir6 28s linear 0s infinite;
    animation: cir6 28s linear 0s infinite
}

.section3 .base {
    -webkit-animation: cir 28s linear 0s infinite;
    -o-animation: cir 28s linear 0s infinite;
    -ms-animation: cir 28s linear 0s infinite;
    -mozanimation: cir 28s linear 0s infinite;
    animation: cir 28s linear 0s infinite
}

@-webkit-keyframes cir1 {
    0% {
        -webkit-transform: rotateY(0deg) rotateZ(0deg)
    }
    100% {
        -webkit-transform: rotateY(-360deg) rotateZ(0deg)
    }
}

@keyframes cir1 {
    0% {
        transform: rotateY(0deg) rotateZ(0deg)
    }
    100% {
        transform: rotateY(-360deg) rotateZ(0deg)
    }
}

@-webkit-keyframes cir2 {
    0% {
        -webkit-transform: rotateY(-60deg) rotateZ(0deg);
    }
    100% {
        -webkit-transform: rotateY(-420deg) rotateZ(0deg);
    }
}

@keyframes cir2 {
    0% {
        transform: rotateY(-60deg) rotateZ(0deg);
    }
    100% {
        transform: rotateY(-420deg) rotateZ(0deg);
    }
}

@-webkit-keyframes cir3 {
    0% {
        -webkit-transform: rotateY(-120deg) rotateZ(0deg);
    }
    100% {
        -webkit-transform: rotateY(-480deg) rotateZ(0deg);
    }
}

@keyframes cir3 {
    0% {
        transform: rotateY(-120deg) rotateZ(0deg);
    }
    100% {
        transform: rotateY(-480deg) rotateZ(0deg);
    }
}

@-webkit-keyframes cir4 {
    0% {
        -webkit-transform: rotateY(-180deg) rotateZ(0deg);
    }
    100% {
        -webkit-transform: rotateY(-540deg) rotateZ(0deg);
    }
}

@keyframes cir4 {
    0% {
        transform: rotateY(-180deg) rotateZ(0deg);
    }
    100% {
        transform: rotateY(-540deg) rotateZ(0deg);
    }
}

@-webkit-keyframes cir5 {
    0% {
        -webkit-transform: rotateY(-240deg) rotateZ(0deg);
    }
    100% {
        -webkit-transform: rotateY(-600deg) rotateZ(0deg);
    }
}

@keyframes cir5 {
    0% {
        transform: rotateY(-240deg) rotateZ(0deg);
    }
    100% {
        transform: rotateY(-600deg) rotateZ(0deg);
    }
}

@-webkit-keyframes cir6 {
    0% {
        -webkit-transform: rotateY(-300deg) rotateZ(0deg);
    }
    100% {
        -webkit-transform: rotateY(-660deg) rotateZ(0deg);
    }
}

@keyframes cir6 {
    0% {
        transform: rotateY(-300deg) rotateZ(0deg);
    }
    100% {
        transform: rotateY(-660deg) rotateZ(0deg);
    }
}

@keyframes cir {
    0% {
        transform: rotateX(80deg) rotateY(0deg) rotateZ(0deg)
    }
    100% {
        transform: rotateX(80deg) rotateY(0deg) rotateZ(-360deg)
    }
}

@-webkit-keyframes cir {
    0% {
        -webkit-transform: rotateX(80deg) rotateY(0deg) rotateZ(0deg)
    }
    100% {
        -webkit-transform: rotateX(80deg) rotateY(0deg) rotateZ(-360deg)
    }
}



</style>
<body>
    <div id="content">
        <div class="inner pr">
          <div class="con_bg ">
            <div class="section3">
              <div class="u_fr">
                <div class="ui_base u_p3d">
                  <div class="ball_c"></div>
                  <div class="base u_p3d">
                    <div class="ball_base u_p3d ball_1">
                      <div class="ball">
                        <span class="span">发动机名称</span>
                        <img class="fdj" src="../img/fdj.png" alt="">
                        <img class="ditu" src="../img/dt.png" alt="">
                      </div>
                    </div>
                    <div class="ball_base u_p3d ball_2">
                      <div class="ball">
                        <span class="span">发动机名称</span>
                        <img class="fdj" src="../img/fdj.png" alt="">
                        <img class="ditu" src="../img/dt.png" alt="">
                      </div>
                    </div>
                    <div class="ball_base u_p3d ball_3">
                      <div class="ball">
                        <span class="span">发动机名称</span>
                        <img class="fdj" src="../img/fdj.png" alt="">
                        <img class="ditu" src="../img/dt.png" alt="">
                      </div>
                    </div>
                    <div class="ball_base u_p3d ball_4">
                      <div class="ball">
                        <span class="span">发动机名称</span>
                        <img class="fdj" src="../img/fdj.png" alt="">
                        <img class="ditu" src="../img/dt.png" alt="">
                      </div>
                    </div>
                    <div class="ball_base u_p3d ball_5">
                      <div class="ball">
                        <span class="span">发动机名称</span>
                        <img class="fdj" src="../img/fdj.png" alt="">
                        <img class="ditu" src="../img/dt.png" alt="">
                      </div>
                    </div>
                    <div class="ball_base u_p3d ball_6">
                      <div class="ball">
                        <span class="span">发动机名称</span>
                        <img class="fdj" src="../img/fdj.png" alt="">
                        <img class="ditu" src="../img/dt.png" alt="">
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
</body>
</html>
qq_27018017
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
CSS3图片围绕地球周转旋转动画特效
06-11
一款很漂亮的3D效果旋转变形特效代码，CSS3图片围绕地球周转旋转动画特效素材下载。
3d 多张图片围绕中心点旋转
qq_27018017的博客
08-10 268
3d 多张图片围绕中心点旋转 旋转木马
利用CSS让图片围绕中心旋转
qitiandada的博客
12-10 4737
起因： 需要一个刷新按钮，一点击就自己旋转一圈，刚开始是想到做一个GIF图，点击图片后就换图片路径。 今天创建react脚手架的时候，看到了react的LOGO在自己动，就看了看他的css。 代码： @keyframes App-logo-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @media (prefers-reduced-motion: no-prefere
css动画将图片绕着中心点旋转
m0_45276446的博客
09-18 5824
@keyframes App-logo-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @media (prefers-reduced-motion: no-preference) { .appLogo { animation: App-logo-spin infinite 20s linear; } }
css旋转不围绕圆心,无法围绕中心css旋转图像
weixin_36413546的博客
08-03 780
所以我想用css旋转一个图标。我试过这个.rotate-icon-gif {-webkit-animation-name: spin;-webkit-animation-duration: 4000ms;-webkit-animation-iteration-count: infinite;-webkit-animation-timing-function: linear;-moz-animati...
css实现围绕中心进行圆形旋转
今晚吃火锅的博客
05-14 543
css animation实现围绕圆心旋转动效
【前端笔记】css实现多元素中心旋转
weixin_44416080的博客
11-13 1160
css实现多元素中心旋转
css如何旋转图片吗,css如何让图片旋转
weixin_33207144的博客
08-04 9369
css让图片旋转的方法：首先创建一个HTML示例文件；然后通过img标签引入图片；最后通过给img图片添加transform和animation样式属性来实现图片旋转效果即可。本文操作环境：windows7系统、HTML5&&CSS3版、Dell G3电脑。我们可以给img图片添加了transform和animation样式属性来实现图片旋转效果。示例：HTML代码： css...
css实现图片旋转效果
10-25
本文将深入探讨如何利用CSS实现图片的旋转效果，以及如何使多张图片以不同的频率围绕同一圆心旋转。 首先，我们从基础开始。CSS中的`transform`属性允许我们对元素进行各种变换，如旋转、缩放、移动和倾斜。要使...
基于H5,CSS3及JS的四星环绕中心点旋转效果
06-28
本效果是基于HTML5，CSS3及JavaScript实现的，实现了移动端和...同时，以中心图片为圆点，四周图片环绕中心图片旋转，主要使用到的技术点在于z-index以及border-radius:50%，实现效果仅供参考（其中图片请自行替换）。
css3指定图片旋转网页特效
11-24
这个函数接受一个角度值作为参数，表示元素将围绕其中心点按照该角度进行旋转。例如，要使一个图片逆时针旋转90度，我们可以这样设置： ```css img { transform: rotate(90deg); } ``` 这里的`deg`单位表示角度，...
css3实现椭圆轨迹旋转的示例代码
09-22
主要介绍了css3实现椭圆轨迹旋转的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
css旋转时让他一直围绕一个点进行
qq_63605379的博客
06-09 538
这样不管怎么动他都是在原点。
css实现水滴效果图
yinge0508的博客
08-12 388
【代码】css实现水滴效果图。
CSS的重绘和重排是什么？
最新发布
沐爸的博客
08-12 749
CSS的重绘和重排是什么？它俩有什么区别？如何对重绘和重排进行优化？快来一起看看吧！
使用 CSS 打印样式为 Web 页面设置专业的打印机效果
08-07 733
对于有打印需求的网页，特别是文章的详情页，需要设置专门的打印样式来适配页面。CSS 打印样式允许你为网页设置专门用于打印的样式。文本就是专门介绍如何使用 CSS 打印样式为 Web 页面设置专业的打印机效果。
前端面试宝典【CSS篇】【4】
BDawn的专栏
08-06 735
盒子模型是 CSS 中用于描述 HTML 元素布局方式的一个概念。在 CSS 中，每个元素都被视为一个矩形盒子，这个盒子由几个不同的部分组成：内容区（content）、内边距（padding）、边框（border）和外边距（margin）。 box-sizing 属性是 CSS 中的一个重要属性，它用于定义元素的盒模型是如何工作的。 CSS Sprites（也称为 CSS 精灵或 CSS 雪碧图）是一种优化网页性能的技术，它将多个小图像合并成一个单一的大图像文件
css 实现让多张图片以桂圆轨迹围绕中心旋转
04-19
这个问题属于技术类问题，可以回答。可以使用CSS中的animation和transform属性进行...可以将多张图片设置为绝对定位，并设置旋转角度和旋转中心点，使它们绕中心点旋转，即可实现类似于桂圆轨迹围绕中心旋转的效果。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值