CSS3 3D旋转立方体

2020-01-27 14:17:14

字体：大中小

来源：转载

供稿：网友

CSS3 3D旋转立方体，应该说是正方形动画，不过做出这样的效果已经很不错了。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>CSS3 3D旋转立方体</title>  <style type="text/css" media="screen">    body {      background-color: black;      color: white;      font-family: 'Lucida Grande', Verdana, Arial;      font-size: 12px;      background-image: -webkit-gradient(radial,                            50% 500, 1,                            50% 500, 400,                            from(rgba(255, 255, 255, 0.3)),                            to(rgba(255, 255, 255, 0)));     background-repeat: no-repeat;    }    #container {      width: 100%;      height: 700px;      -webkit-perspective: 800; /* For compatibility with iPhone 3.0, we leave off the units here */      -webkit-perspective-origin: 50% 225px;    }    #stage {      width: 100%;      height: 100%;      -webkit-transition: -webkit-transform 2s;      -webkit-transform-style: preserve-3d;    }    #shape {      position: relative;      top: 160px;      margin: 0 auto;      height: 200px;      width: 200px;      -webkit-transform-style: preserve-3d;    }        .plane {      position: absolute; left:0;top:0;      height: 200px;      width: 200px;      border: 1px solid white;      -webkit-border-radius: 12px;      -webkit-box-sizing: border-box;      text-align: center;      font-family: Times, serif;      font-size: 124pt;      color: black;      background-color: rgba(255, 255, 255, 0.6);      -webkit-transition: -webkit-transform 2s, opacity 2s;      -webkit-backface-visibility: hidden;    }    #shape.backfaces .plane {      -webkit-backface-visibility: visible;    }        #shape {      -webkit-animation: spin 8s infinite linear;    }    @-webkit-keyframes spin {      from { -webkit-transform: rotateY(0); }      to   { -webkit-transform: rotateY(-360deg); }    }    .cube > .one {      opacity: 0.5;      -webkit-transform: scale3d(1.2, 1.2, 1.2) rotateX(90deg) translateZ(100px);    }    .cube > .two {      opacity: 0.5;      -webkit-transform: scale3d(1.2, 1.2, 1.2) translateZ(100px);    }    .cube > .three {      opacity: 0.5;      -webkit-transform: scale3d(1.2, 1.2, 1.2) rotateY(90deg) translateZ(100px);    }    .cube > .four {      opacity: 0.5;      -webkit-transform: scale3d(1.2, 1.2, 1.2) rotateY(180deg) translateZ(100px);    }    .cube > .five {      opacity: 0.5;      -webkit-transform: scale3d(1.2, 1.2, 1.2) rotateY(-90deg) translateZ(100px);    }    .cube > .six {      opacity: 0.5;      -webkit-transform: scale3d(1.2, 1.2, 1.2) rotateX(-90deg) translateZ(100px) rotate(180deg);    }    .cube > .seven {      -webkit-transform: scale3d(0.8, 0.8, 0.8) rotateX(90deg) translateZ(100px) rotate(180deg);    }    .cube > .eight {      -webkit-transform: scale3d(0.8, 0.8, 0.8) translateZ(100px);    }    .cube > .nine {      -webkit-transform: scale3d(0.8, 0.8, 0.8) rotateY(90deg) translateZ(100px);    }    .cube > .ten {      -webkit-transform: scale3d(0.8, 0.8, 0.8) rotateY(180deg) translateZ(100px);    }    .cube > .eleven {      -webkit-transform: scale3d(0.8, 0.8, 0.8) rotateY(-90deg) translateZ(100px);    }    .cube > .twelve {      -webkit-transform: scale3d(0.8, 0.8, 0.8) rotateX(-90deg) translateZ(100px);    }    /* ---------- ring styles ------------- */    .ring > .one {      -webkit-transform: translateZ(380px);    }    .ring > .two {      -webkit-transform: rotateY(30deg) translateZ(380px);    }    .ring > .three {      -webkit-transform: rotateY(60deg) translateZ(380px);    }    .ring > .four {      -webkit-transform: rotateY(90deg) translateZ(380px);    }    .ring > .five {      -webkit-transform: rotateY(120deg) translateZ(380px);    }    .ring > .six {      -webkit-transform: rotateY(150deg) translateZ(380px);    }    .ring > .seven {      -webkit-transform: rotateY(180deg) translateZ(380px);    }    .ring > .eight {      -webkit-transform: rotateY(210deg) translateZ(380px);    }    .ring > .nine {      -webkit-transform: rotateY(-120deg) translateZ(380px);    }    .ring > .ten {      -webkit-transform: rotateY(-90deg) translateZ(380px);    }    .ring > .eleven {      -webkit-transform: rotateY(300deg) translateZ(380px);    }    .ring > .twelve {      -webkit-transform: rotateY(330deg) translateZ(380px);    }    .controls {      width: 80%;      margin: 0 auto;      padding: 5px 20px;      -webkit-border-radius: 12px;      background-color: rgba(255, 255, 255, 0.5);    }    .controls > div {      margin: 10px;    }  </style>  <script type="text/javascript" charset="utf-8">    function hasClassName(inElement, inClassName)    {        var regExp = new RegExp('(?:^|//s+)' + inClassName + '(?://s+|$)');        return regExp.test(inElement.className);    }    function addClassName(inElement, inClassName)    {        if (!hasClassName(inElement, inClassName))            inElement.className = [inElement.className, inClassName].join(' ');    }    function removeClassName(inElement, inClassName)    {        if (hasClassName(inElement, inClassName)) {            var regExp = new RegExp('(?:^|//s+)' + inClassName + '(?://s+|$)', 'g');            var curClasses = inElement.className;            inElement.className = curClasses.replace(regExp, ' ');        }    }    function toggleClassName(inElement, inClassName)    {        if (hasClassName(inElement, inClassName))            removeClassName(inElement, inClassName);        else            addClassName(inElement, inClassName);    }    function toggleShape()    {      var shape = document.getElementById('shape');      if (hasClassName(shape, 'ring')) {        removeClassName(shape, 'ring');        addClassName(shape, 'cube');      } else {        removeClassName(shape, 'cube');        addClassName(shape, 'ring');      }            // Move the ring back in Z so it's not so in-your-face.      var stage = document.getElementById('stage');      if (hasClassName(shape, 'ring'))        stage.style.webkitTransform = 'translateZ(-200px)';      else        stage.style.webkitTransform = '';    }        function toggleBackfaces()    {      var backfacesVisible = document.getElementById('backfaces').checked;      var shape = document.getElementById('shape');      if (backfacesVisible)        addClassName(shape, 'backfaces');      else        removeClassName(shape, 'backfaces');    }  </script></head><body screen_capture_injected="true"><div id="container">    <div id="stage">      <div id="shape" class="cube backfaces">        <div class="plane one">1</div>        <div class="plane two">2</div>        <div class="plane three">3</div>        <div class="plane four">4</div>        <div class="plane five">5</div>        <div class="plane six">6</div>        <div class="plane seven">7</div>        <div class="plane eight">8</div>        <div class="plane nine">9</div>        <div class="plane ten">10</div>        <div class="plane eleven">11</div>        <div class="plane twelve">12</div>      </div>    </div>  </div></body></html>

上一篇：CSS3练习：css3迷宫游戏

下一篇：CSS3边框阴影，折角效果演示