zoukankan      html  css  js  c++  java
  • 博客园添加3D立方体旋转效果

    效果图如下




    代码实现

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>HTML5 3D立体动画照片旋转-原理</title>
      <style text="text/css">
        .container {
           120px;
          height: 120px;
          margin: 20px;
          position: fixed;
          z-index: 999;
          float: right;
          top: 160px;
          right: 40px;
          transform: rotateY(15deg) rotateX(-15deg);
          transform-style: preserve-3d;
          animation: xuanzhuan 16s linear infinite;
        }
    
        @keyframes xuanzhuan {
          0% {
            transform: rotateY(15deg) rotateX(45deg);
          }
          50% {
            transform: rotateY(375deg) rotateX(-45deg);
          }
          100% {
            transform: rotateY(735deg) rotateX(45deg);
          }
        }
    
        .container div.front {
          background: white;
          transform: translateZ(60px);
        }
    
        .container div.back {
          background: white;
          transform: translateZ(-60px) rotateY(180deg);
        }
    
        .container div.left {
          background: white;
          transform: translateX(-60px) rotateY(-90deg);
        }
    
        .container div.right {
          background: white;
          transform: translateX(60px) rotateY(90deg);
        }
    
        .container div.top {
          background: white;
          transform: translateY(-60px) rotateX(90deg);
        }
    
        .container div.bottom {
          background: white;
          transform: translateY(60px) rotateX(-90deg);
        }
    
        .container div {
          position: absolute;
          left: 0;
          top: 0;
           120px;
          height: 120px;
          line-height: 120px;
          text-align: center;
          font-size: 40px;
        }
    
        .container .pic {
           120px;
          height: 120px;
        }
      </style>
    </head>
    <body>
    <div class="container">
      <!--前面图片 -->
      <div class="front">
        <img src="https://files.cnblogs.com/files/strongmore/cube01.gif" class="pic">
      </div>
      <!--后面图片 -->
      <div class="back">
        <img src="https://files.cnblogs.com/files/strongmore/cube02.gif" class="pic">
      </div>
      <!--左面图片 -->
      <div class="left">
        <img src="https://files.cnblogs.com/files/strongmore/cube03.gif" class="pic">
      </div>
      <!--右面图片 -->
      <div class="right">
        <img src="https://files.cnblogs.com/files/strongmore/cube04.gif" class="pic">
      </div>
      <!--上面图片 -->
      <div class="top">
        <img src="https://files.cnblogs.com/files/strongmore/cube05.gif" class="pic">
      </div>
      <!--下面图片 -->
      <div class="bottom">
        <img src="https://files.cnblogs.com/files/strongmore/cube06.gif" class="pic">
      </div>
    </div>
    </div>
    </body>
    </html>
    

    关于如何给博客园添加自定义js代码,可以查看 博客园Markdown代码块添加复制功能 这篇博客。

    参考

    博客园美化 - 3D立体动画照片旋转(HTML5)

  • 相关阅读:
    Java_JDK_TreeMap
    回归——线性回归,Logistic回归,范数,最大似然,梯度,最小二乘……
    机器学习——SVM详解(标准形式,对偶形式,Kernel及Soft Margin)
    npm start 作用
    Cookie禁用了,Session还能用吗?
    jquery判断页面滚动条(scroll)是上滚还是下滚,且是否滚动到头部或者底部
    js怎么判断浏览器类型
    移动端touch触屏滑动事件、滑动触屏事件监听!
    js中的caller和callee属性
    【分享】分享一个压缩 PNG 的网站 TinyPNG
  • 原文地址:https://www.cnblogs.com/strongmore/p/15072392.html
Copyright © 2011-2022 走看看