html5纯css3带自动视频播放的iPhone4手机360度旋转展示

这款作品给人的第一感觉是flash做的，但其实不然，它出自css3之手。并且它没有使用任何的图片，看过效果之后是不是觉得非常不可思议？

iPhone手机展示中的视频部分使用的是html5的video，整个手机不论是高光、阴影，还是旋转动画都是使用css3完成。

HTML结构

<div id="scene3D">
  <div id="iphone">
    <div class="slab black">          
      <div class="top"></div>
      <div class="right"></div>
      <div class="bottom"></div>
      <div class="left"></div>
      <div id="webcam">
        <div id="flash"></div>
      </div>
      <div id="speaker-front">
        <div class="dot"></div>
        ...
      </div>
      <div id="screen">
        <video controls autoplay muted loop src="http://www.htmleaf.com/assist/apple-html5-demo-tron-us_848x352.m4v" width="328.2" height="218"></video>
      </div>
      <div id="home-button">
        <div id="square"></div>
      </div>
      <div class="front thickness-end"></div>
      <div class="front thickness"></div>
      <div class="front"></div>
      <div class="back"></div>
    </div>
    <div class="slab">
      <div class="top">
        <div class="join"></div>
        <div class="on-off">
          <div class="on-off on-off-1"></div>
          ...
        </div>
        <div id="earphone"></div>
        <div id="click"></div>
      </div>
      <div class="right">
        <div class="join"></div>
        <div id="sim">
          <div id="hole"></div>
        </div>
      </div>
      <div class="bottom">
        <div class="speaker">
          <div class="dot"></div>
          ...
        </div>
        <div class="screws">X</div>
        <div id="dock">
          <div id="connector"></div>
        </div>
        <div class="screws screws-right">X</div>
        <div class="speaker speaker-right">
          <div class="dot"></div>
          ...
        </div>
      </div>
      <div class="left">
        <div id="ringtone">
          <div class="lock">
            <div class="lock lock-1"></div>
            ...
          </div>
        </div>
        <div class="volume">
          <div class="volume volume-1"></div>
          ...
        </div>
        <div class="volume volume-less">
          <div class="volume volume-1"></div>
          ...
        </div>
        <div class="join"></div>              
      </div>
      <div class="front"></div>
      <div class="back"></div>
    </div>
    <div class="slab black black-back">
      <div class="top"></div>
      ...
    </div>
  </div>
</div>  
                

动画部分的css

* {
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}
#scene3D {  
  -webkit-perspective: 1200px;        
  perspective: 1200px;  
}
#iphone {
  width: 254px;
  height: 500px;
  margin: 50px auto 0;
  -webkit-animation: rotateiphone 15s infinite linear;
  animation: rotateiphone 15s infinite linear;
  /*-webkit-transform: rotateX(45deg) rotateY(0deg) rotateZ(45deg);
  transform: rotateX(45deg) rotateY(0deg) rotateZ(45deg);*/
}
@-webkit-keyframes rotateiphone {
  from { 
    -webkit-transform: rotateX(45deg ) rotateY(0deg ) rotateZ(45deg );
  }
  to {
    -webkit-transform: rotateX(405deg ) rotateY(360deg ) rotateZ(405deg );
  }
}
@keyframes rotateiphone {
  from { 
    transform: rotateX(45deg ) rotateY(0deg ) rotateZ(45deg );
  }
  to {
    transform: rotateX(405deg ) rotateY(360deg ) rotateZ(405deg );
  }
}
@-webkit-keyframes reflection {       
  from { 
    background-position: 300px 0, 0 0;
  }
  12% {
    background-position: 0 0, 0 0;
  }
  15% { 
    background-position: 300px 0, 0 0;
  }       
  43% {
    background-position: 0 0, 0 0;
  }
  57% {
    background-position: 300px 0, 0 0;
  }         
  to {
    background-position: 300px 0, 0 0;
  }       
}
@keyframes reflection {       
  from { 
    background-position: 300px 0, 0 0;
  }
  12% {
    background-position: 0 0, 0 0;
  }
  15% { 
    background-position: 300px 0, 0 0;
  }       
  43% {
    background-position: 0 0, 0 0;
  }
  57% {
    background-position: 300px 0, 0 0;
  }         
  to {
    background-position: 300px 0, 0 0;
  }       
}
                

完整代码请参考下载包中的文件。