Animasi, peralihan dan transformasi 3D

Demo ini menunjukkan beberapa kandungan yang menarik menggunakan transformasi 3D, animasi dan peralihan.

- Klik butang 'Ubah Bentuk' untuk bertukar antara kiub bersarang dan satu gegelang besar. Perhatikan cara papan bergerak dengan lancar ke lokasi baharu mereka, walaupun semasa keseluruhan bentuk berputar. Anda juga boleh mengulang semula peralihan ini dengan mengklik sekali lagi, dan ia bergerak kembali dengan lancar.

- Klik butang 'Lihat MB' untuk menghidupkan dan memadam mukabelakang menggunakan -webkit-backface-visibility.

Lihat MB

1

2

3

4

5

6

7

8

9

10

11

12

HTML view ▼

<button onclick="toggleShape()">Ubah Bentuk</button><br/><br/>
    <div><input type="checkbox" id="backfaces" onclick="toggleBackfaces()" checked><label for="backfaces">Lihat MB</label></div>
 <div style="background-color: #3d85c6;">
  <div id="tongs">
    <div id="pentass">
      <div id="shape" class="cube backfaces">
        <div class="plane one"><br/><br/><br/><br/>1</div>
        <div class="plane two"><br/><br/><br/><br/>2</div>
        <div class="plane three"><br/><br/><br/><br/>3</div>
        <div class="plane four"><br/><br/><br/><br/>4</div>
        <div class="plane five"><br/><br/><br/><br/>5</div>
        <div class="plane six"><br/><br/><br/><br/>6</div>
        <div class="plane seven"><br/><br/><br/><br/>7</div>
        <div class="plane eight"><br/><br/><br/><br/>8</div>
        <div class="plane nine"><br/><br/><br/><br/>9</div>
        <div class="plane ten"><br/><br/><br/><br/>10</div>
        <div class="plane eleven"><br/><br/><br/><br/>11</div>
        <div class="plane twelve"><br/><br/><br/><br/>12</div>
      </div>
    </div>
  </div>
 <div>
</div>
</div>
  <style type="text/css"  media="screen">
    #tongs {
      width: 100%;
      height: 34rem;
      -webkit-perspective: 800;
      -webkit-perspective-origin: 50% 225px;
    }
    #pentass {
      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;
      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: 80px;
      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 > .one {
      -webkit-transform: translateZ(340px);
    }
    .ring > .two {
      -webkit-transform: rotateY(30deg) translateZ(340px);
    }
    .ring > .three {
      -webkit-transform: rotateY(60deg) translateZ(340px);
    }
    .ring > .four {
      -webkit-transform: rotateY(90deg) translateZ(340px);
    }
    .ring > .five {
      -webkit-transform: rotateY(120deg) translateZ(340px);
    }
    .ring > .six {
      -webkit-transform: rotateY(150deg) translateZ(340px);
    }
    .ring > .seven {
      -webkit-transform: rotateY(180deg) translateZ(340px);
    }
    .ring > .eight {
      -webkit-transform: rotateY(210deg) translateZ(340px);
    }
    .ring > .nine {
      -webkit-transform: rotateY(-120deg) translateZ(340px);
    }
    .ring > .ten {
      -webkit-transform: rotateY(-90deg) translateZ(340px);
    }
    .ring > .eleven {
      -webkit-transform: rotateY(300deg) translateZ(340px);
    }
    .ring > .twelve {
      -webkit-transform: rotateY(330deg) translateZ(340px);
    }
  </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');
      }
      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>

Tutup

CSS disesuaikan untuk paparan di blog ini. Demo ini dipetik dari webkit.org