自动视频播放手机360度旋转效果

PetitQ 图片/图形 2019-1-14 2.07K 0 0

这款作品给人的第一感觉是 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;
```
```
  }       
```
```
}
```

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

自动视频播放手机 360 度旋转效果

已有 516 人购买

永久更新：
演示数据：

立即购买

查看演示升级 VIP 立刻购买

演示地址

下载地址

炫酷企业建站作品展示WordPress中文模板

Supro - 极简电商网站模板WordPress汉化主题

Photon - 全屏摄影相册产品展示网站WordPress汉化主题

图片/图形

自动视频播放手机360度旋转效果

HTML 结构

动画 css

自动视频播放手机 360 度旋转效果

相关文章

WebGL的图像扭曲变形动画特效

炫酷鼠标滑过效果的多列布局效果

场景CSS3鼠标滑过文字动画特效

发表回复取消回复

热销模板

图片/图形

HTML 结构

动画 css

自动视频播放手机 360 度旋转效果

相关文章

发表回复 取消回复

热销模板

发表回复取消回复