• 欢迎访问杨思积的博客,专注于前端资讯分享,前端技术交流!

css3模拟3D行星运转效果图

精选代码 Tomy 313次浏览 已收录 0个评论 扫描二维码
<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>css3模拟3D行星运转效果图</title>
    <link rel="stylesheet" type="text/css" href="http://demo.lanrenzhijia.com/2016/css0429/css/reset.css" />
    <link rel="stylesheet" type="text/css" href="http://demo.lanrenzhijia.com/2016/css0429/css/solarSystemStyle.css" />
</head>
<body>
  <span style="display:none;">
<script src="http://s94.cnzz.com/stat.php?id=4106941&web_id=4106941" language="JavaScript"></script>
</span>  <div class="container">
    <!-- 3d照片墙 -->
    <div class="demo-perspective-photo">
      <div id="contentContainer">
        <div id="carouselContainer">
          <figure class="mod-sun">
            <div class="x">
              <div class="x1"></div>
              <div class="x2"></div>
              <div class="xInner"></div>
              <div class="y"></div>
              <div class="y1"></div>
              <div class="y2"></div>
              <div class="yInner"></div>
              <div class="z"></div>
              <div class="z1"></div>
              <div class="z2"></div>
              <div class="zInner"></div>
            </div>
          </figure>
          <figure class='example example1'>
            <div class="x">
              <div class="x1"></div>
              <div class="x2"></div>
              <div class="xInner"></div>
              <div class="y"></div>
              <div class="y1"></div>
              <div class="y2"></div>
              <div class="yInner"></div>
              <div class="z"></div>
              <div class="z1"></div>
              <div class="z2"></div>
              <div class="zInner"></div>
            </div>
          </figure>
          <figure class='example example2'>
            <div class="x">
              <div class="x1"></div>
              <div class="x2"></div>
              <div class="xInner"></div>
              <div class="y"></div>
              <div class="y1"></div>
              <div class="y2"></div>
              <div class="yInner"></div>
              <div class="z"></div>
              <div class="z1"></div>
              <div class="z2"></div>
              <div class="zInner"></div>
            </div>
          </figure>
          <figure class='example example3'>
            <div class="x">
              <div class="x1"></div>
              <div class="x2"></div>
              <div class="xInner"></div>
              <div class="y"></div>
              <div class="y1"></div>
              <div class="y2"></div>
              <div class="yInner"></div>
              <div class="z"></div>
              <div class="z1"></div>
              <div class="z2"></div>
              <div class="zInner"></div>
            </div>
          </figure>
          <figure class='example example4'>
            <div class="x">
              <div class="x1"></div>
              <div class="x2"></div>
              <div class="xInner"></div>
              <div class="y"></div>
              <div class="y1"></div>
              <div class="y2"></div>
              <div class="yInner"></div>
              <div class="z"></div>
              <div class="z1"></div>
              <div class="z2"></div>
              <div class="zInner"></div>
            </div>
          </figure>
          <figure class='example example5'>
            <div class="x">
              <div class="x1"></div>
              <div class="x2"></div>
              <div class="xInner"></div>
              <div class="y"></div>
              <div class="y1"></div>
              <div class="y2"></div>
              <div class="yInner"></div>
              <div class="z"></div>
              <div class="z1"></div>
              <div class="z2"></div>
              <div class="zInner"></div>
            </div>
          </figure>
          <figure class='example example6'>
            <div class="x">
              <div class="x1"></div>
              <div class="x2"></div>
              <div class="xInner"></div>
              <div class="y"></div>
              <div class="y1"></div>
              <div class="y2"></div>
              <div class="yInner"></div>
              <div class="z"></div>
              <div class="z1"></div>
              <div class="z2"></div>
              <div class="zInner"></div>
            </div>
          </figure>
          <figure class="circle circle1"></figure>
          <figure class="circle circle2"></figure>
          <figure class="circle circle3"></figure>
          <figure class="circle circle4"></figure>
          <figure class="circle circle5"></figure>
          <figure class="circle circle6"></figure>
        </div>
      </div>
    </div>
  </div>
  <script src="http://demo.lanrenzhijia.com/2016/css0429/js/jquery-1.8.0.min.js"></script>
  <script src="http://demo.lanrenzhijia.com/2016/css0429/js/TweenMax.min.js"></script>
  <script src="http://demo.lanrenzhijia.com/2016/css0429/js/solarSystem.js"></script>
  <script>
    $('.demo-perspective-photo,#contentContainer').css('height',$(window).height());
  </script>
</html>

代码演示
杨思积的博客 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权 , 转载请注明css3模拟3D行星运转效果图
喜欢 (0)
[嘿嘿,你懂的]
分享 (0)
Tomy
关于作者:
一个前端爱好者!
发表我的评论
取消评论

表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址