TweenMax实现三维视觉差异效果代码-html代码-BFW代码库

TweenMax实现三维视觉差异效果代码

代码语言：html

所属分类：三维

代码描述：TweenMax实现三维视觉差异效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">
  

  
  
  
<style>
body 
{
  overflow: hidden;
  background-color:darkgray;
  position: absolute;
  top: 0;
  left:0;
  width: 100%;
  height:100%;
  -moz-transform: perspective(1000px);
  -moz-transform-style: preserve-3d;
  -webkit-perspective: 1000px;
}

#container 
{
  outline: 1px solid transparent;
  position: absolute;
  left:50%;
  top:50%;
  margin-left: -250px;
  margin-top: -265px;
  height: 537px;
  width: 500px;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
  background: url('//repo.bfw.wiki/bfwrepo/image/6087a8d827494.png') no-repeat;
  transform: translateZ(0px);
  -moz-transform: translateZ(0px);
  -webkit-transform: translateZ(0px);
}

.figure
{
  outline: 1px solid transparent;
  width: 442px;
  height: 483px;
  background: url('//repo.bfw.wiki/bfwrepo/image/5e32407d9bd1a.png') no-repeat;
  position: absolute;
  transform: translateZ(120px);
  -moz-transform: translateZ(120px);
  -webkit-transform: translateZ(120px);
  bottom: 0px;
  left: 20%;
  margin-left: -71px;
}

.gsap 
{
  outline: 1px solid transparent;
  width: 396px;
  height: 128px;
  background: url('//repo.bfw.wiki/bfwrepo/image/5f9d24338ca70.png') no-repeat;
  position: absolute;
  transform: translateZ(60px);
  -moz-transform: translateZ(60px);
  -webkit-transform: translateZ(60px);
  top: 30px;
  left: 50%;
  margin-left: -198px;
}
.tagline 
{
  w.........完整代码请登录后点击上方下载按钮下载查看