div+css实现三维iphone苹果4手机效果代码

代码语言:html

所属分类:三维

代码描述:div+css实现三维iphone苹果4手机效果代码

代码标签: css 三维 iphone 苹果 手机

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


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

<head>

  <meta charset="UTF-8">
  

  
  
  
  
<style>
/**********************/ 
			/*     animation      */
			/**********************/ 
			
			* {
				-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-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;
				}				
			}
						
			/**********************/ 
			/*   SLAB structure   */
			/**********************/ 
			
			.slab div {
				position: absolute;
				-webkit-transform-origin: 0 0 0;
				transform-origin: 0 0 0;
			}
			.slab .front, .slab .back {
				width: 254px;
				height: 500px;
				background: #ffffff;				
				background: -moz-linear-gradient(top,  #ffffff 0%, #f9f9f9 100%);
				background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#f9f9f9));
				background: -webkit-linear-gradient(top,  #ffffff 0%,#f9f9f9 100%);
				background: -o-linear-gradient(top,  #ffffff 0%,#f9f9f9 100%);
				background: -ms-linear-gradient(top,  #ffffff 0%,#f9f9f9 100%);
				background: linear-gradient(to bottom,  #ffffff 0%,#f9f9f9 100%);
				filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f9f9f9',GradientType=0 );
				border-radius: 20px;
			}
			.slab .back {		
				background: #a3a3a3;
				background: -moz-linear-gradient(top,  #a3a3a3 0%, #808080 100%);
				background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a3a3a3), color-stop(100%,#808080));
				background: -webkit-linear-gradient(top,  #a3a3a3 0%,#808080 100%);
				background: -o-linear-gradient(top,  #a3a3a3 0%,#808080 100%);
				background: -ms-linear-gradient(top,  #a3a3a3 0%,#808080 100%);
				background: linear-gradient(to bottom,  #a3a3a3 0%,#808080 100%);
				filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a3a3a3', endColorstr='#808080',GradientType=0 );
				-webkit-transform: translate3D(0,0,-30px);
				transform: translate3D(0,0,-30px);
			}
			.slab .top, .slab .bottom {
				width: 214px;
				height: 30px;
				background: #b6b6b6;
				-webkit-transform: translate(20px) rotateX(-90deg);
				transform: translate(20px) rotateX(-90deg);
			}
			.slab .bottom {
				background: #6f6f6f;
				background: -moz-linear-gradient(left,  #6f6f6f 0%, #636363 100%);
				background: -webkit-gradient(linear, left top, right top, color-stop(0%,#6f6f6f), color-stop(100%,#636363));
				background: -webkit-linear-gradient(left,  #6f6f6f 0%,#636363 100%);
				background: -o-linear-gradient(left,  #6f6f6f 0%,#636363 100%);
				background: -ms-linear-gradient(left,  #6f6f6f 0%,#636363 100%);
				background: linear-gradient(to right,  #6f6f6f 0%,#636363 100%);
				filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6f6f6f', endColorstr='#636363',GradientType=1 );
				box-shadow: inset 0 1px 0 #363636;	
				-webkit-transform: translate(20px,500px) rotateX(-90deg);
				transform: translate(20px,500px) rotateX(-90deg);
			}
			.slab .right, .slab .left {
				width: 460px;
				height: 30px;
				background: #a3a3a3;
				background: -moz-linear-gradient(left,  #a3a3a3 0%, #d6d6d6 10%, #a3a3a3 15%, #808080 100%);
				background: -webkit-gradient(linear, left top, right top, color-stop(0%,#a3a3a3), color-stop(10%,#d6d6d6), color-stop(15%,#a3a3a3), color-stop(100%,#808080));
				background: -webkit-linear-gradient(left,  #a3a3a3 0%,#d6d6d6 10%,#a3a3a3 15%,#808080 100%);
				background: -o-linear-gradient(left,  #a3a3a3 0%,#d6d6d6 10%,#a3a3a3 15%,#808080 100%);
				background: -ms-linear-gradient(left,  #a3a3a3 0%,#d6d6d6 10%,#a3a3a3 15%,#808080 100%);
				background: linear-gradient(to right,  #a3a3a3 0%,#d6d6d6 10%,#a3a3a3 15%,#808080 100%);
				filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a3a3a3', endColorstr='#808080',GradientType=1 );
				-webkit-transform: translate(254px,20px) rotateY(-90deg) rotateZ(90deg);
				transform: translate(254px,20px) rotateY(-90deg) rotateZ(90deg);
			}
			.slab .left {
				background: #a3a3a3;
				background: -moz-linear-gradient(left,  #a3a3a3 0%, #808080 100%);
				background: -webkit-gradient(linear, left top, right top, color-stop(0%,#a3a3a3), color-stop(100%,#808080));
				background: -webkit-linear-gradient(left,  #a3a3a3 0%,#808080 100%);
				background: -o-linear-gradient(left,  #a3a3a3 0%,#808080 100%);
				background: -ms-linear-gradient(left,  #a3a3a3 0%,#808080 100%);
				background: linear-gradient(to right,  #a3a3a3 0%,#808080 100%);
				filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a3a3a3', endColorstr='#808080',GradientType=1 );
				-webkit-transform: translate(0,20px) rotateY(-90deg) rotateZ(90deg);
				transform: translate(0,20px) rotateY(-90deg) rotateZ(90deg);
			}
			
			/**********************/ 
			/*     SLAB angle     */
			/**********************/ 
			
			.slab .top:before, .slab .top:after, .slab .right:before, .slab .right:after, .slab .bottom:before, .slab .bottom:after, .slab .left:before, .slab .left:after {
				content: "";
				position: absolute;
				top: 0;
				bottom: 0;
				left: -15px;
				width: 16px;
				background: #a3a3a3;
				background: -moz-linear-gradient(left,  #a3a3a3 0%, #b6b6b6 100%);
				background: -webkit-gradient(linear, left top, right top, color-stop(0%,#a3a3a3), color-stop(100%,#b6b6b6));
				background: -webkit-linear-gradient(left,  #a3a3a3 0%,#b6b6b6 100%);
				background: -o-linear-gradient(left,  #a3a3a3 0%,#b6b6b6 100%);
				background: -ms-linear-gradient(left,  #a3a3a3 0%,#b6b6b6 100%);
				background: linear-gradient(to right,  #a3a3a3 0%,#b6b6b6 100%);
				filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a3a3a3', endColorstr='#b6b6b6',GradientType=1 );
				-webkit-transform: translateZ(3px) rotateY(22.5deg);
				transform: translateZ(3px) rotateY(22.5deg);
			}
			.slab .top:after, .slab .right:before, .slab .bottom:before {
				left: auto;
				right: -15px;
				background: #b6b6b6;
				background: -moz-linear-gradient(left,  #b6b6b6 0%, #a3a3a3 100%);
				background: -webkit-gradient(linear, left top, right top, color-stop(0%,#b6b6b6), color-stop(100%,#a3a3a3));
				background: -webkit-linear-gradient(left,  #b6b6b6 0%,#a3a3a3 100%);
				background: -o-linear-gradient(left,  #b6b6b6 0%,#a3a3a3 100%);
				background: -ms-linear-gradient(left,  #b6b6b6 0%,#a3a3a3 100%);
				background: linear-gradient(to right,  #b6b6b6 0%,#a3a3a3 100%);
				filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b6b6b6', endColorstr='#a3a3a3',GradientType=1 );
				-webkit-transform: translateZ(3px) rotateY(-22.5deg);
				transform: translateZ(3px) rotateY(-22.5deg);
			}
			.slab .right:before {
				background: #808080;
				background: -moz-linear-gradient(left,  #808080 0%, #636363 100%);
				background: -webkit-gradient(linear, left top, right top, color-stop(0%,#808080), color-stop(100%,#636363));
				background: -webkit-linear-gradient(left,  #808080 0%,#636363 100%);
				background: -o-linear-gradient(left,  #808080 0%,#636363 100%);
				background: -ms-linear-gradient(left,  #808080 0%,#636363 100%);
				background: linear-gradient(to right,  #808080 0%,#636363 100%);
				filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#808080', endColorstr='#636363',GradientType=1 );
			}
			.slab .right:after {
				background: #a3a3a3;
			}
			.slab .bottom:before, .slab .left:after {
				background: #636363;
				-webkit-transform: translateZ(-3px) rotateY(22.5deg);
				transform: translateZ(-3px) rotateY(22.5deg);
			}
			.slab .bottom:after, .slab .left:before {
				background: #6f6f6f;
				-webkit-transform: translateZ(-3px) rotateY(-22.5deg);
				transform: translateZ(-3px) rotateY(-22.5deg);
			}
			.slab .left:before {
				background: #a3a3a3;
			}
			.slab .left:after {
				left: auto;
				right: -15px;
				background: #808080;
				background: -moz-linear-gradient(left,  #808080 0%, #6f6f6f 100%);
				background: -webkit-gradient(linear, left top, right top, color-stop(0%,#808080), color-stop(100%,#6f6f6f));
				background: -webkit-linear-gradient(left,  #808080 0%,#6f6f6f 100%);
				background: -o-linear-gradient(left,  #808080 0%,#6f6f6f 100%);
				background: -ms-linear-gradient(left,  #808080 0%,#6f6f6f 100%);
				background: linear-gradient(to right,  #808080 0%,#6f6f6f 100%);
				filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#808080', endColorstr='#6f6f6f',GradientType=1 );
			}			
			
			/**********************/ 
			/*  SLAB black front  */
			/**********************/ 

			.black {
				-webkit-transform-origin: 0 0 0;
				transform-origin: 0 0 0;
				-webkit-transform: translate3D(2.38px,2.38px,5.1px) scale3D(.98126,.99048,.167);
				transform: translate3D(2.38px,2.38px,5.1px) scale3D(.98126,.99048,.167);
			}
			.black .front {
				border: 1px solid #454545;
				background: #131313;
				background: -moz-linear-gradient(left,  #131313 0%, #2c2c2c 100%);
				background: -webkit-gradient(linear, left top, right top, color-stop(0%,#131313), color-stop(100%,#2c2c2c));
				background: -webkit-linear-gradient(left,  #131313 0%,#2c2c2c 100%);
				background: -o-linear-gradient(left,  #131313 0%,#2c2c2c 100%);
				background: -ms-linear-gradient(left,  #131313 0%,#2c2c2c 100%);
				background: linear-gradient(to right,  #131313 0%,#2c2c2c 100%);
				filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#131313', endColorstr='#2c2c2c',GradientType=1 );
				-webkit-transform: translate3D(2px,2px,2px) scale(.976,.988);
				transform: translate3D(2px,2px,2px) scale(.976,.988);
			}
			.black .thickness {
				border: 1px solid #131313;
				background: #232323;
				-webkit-transform: translate3D(3px,3px,5px) scale(.968,.984);
				transform: translate3D(3px,3px,5px) scale(.968,.984);
			}
			.black .thickness-end {
				border: 1px solid #131313;
				background: -moz-linear-gradient(-163deg,  rgba(255,255,255,0) 0%,rgba(255,255,255,.1) 60%,rgba(255,255,255,0) 60%,rgba(255,255,255,0) 100%), 
							-moz-linear-gradient(left,  #131313 0%, #2c2c2c 100%);
				background: -webkit-gradient(linear, left top, right bottom,  color-stop(0%,rgba(255,255,255,0)),color-stop(60%,rgba(255,255,255,.1)),color-stop(60%,rgba(255,255,255,0)),color-stop(100%,rgba(255,255,255,0))), 
							-webkit-gradient(linear, left top, right top, color-stop(0%,#131313), color-stop(100%,#2c2c2c));
				background: -webkit-linear-gradient(-163deg,  rgba(255,255,255,0) 0%,rgba(255,255,255,.1) 60%,rgba(255,255,255,0) 60%,rgba(255,255,255,0) 100%), 
							-webkit-linear-gradient(left,  #131313 0%, #2c2c2c 100%);		
				background: -o-linear-gradient(-163deg,  rgba(255,255,255,0) 0%,rgba(255,255,255,.1) 60%,rgba(255,255,255,0) 60%,rgba(255,255,255,0) 100%), 
							-o-linear-gradient(left,  #131313 0%, #2c2c2c 100%);
				background: -ms-linear-gradient(-163deg,  rgba(255,255,255,0) 0%,rgba(255,255,255,.1) 60%,rgba(255,255,255,0) 60%,rgba(255,255,255,0) 100%), 
							-ms-linear-gradient(left,  #131313 0%, #2c2c2c 100%);							
				background: linear-gradient(-107deg,  rgba(255,255,255,0) 0%,rgba(255,255,255,.1) 60%,rgba(255,255,255,0) 60%,rgba(255,255,255,0) 100%), 
							linear-gradient(to right,  #131313 0%,#2c2c2c 100%);
				background-repeat: no-repeat;
				-webkit-transform: translate3D(6px,6px,6px) scale(.945,.972);
				transform: translate3D(6px,6px,6px) scale(.945,.972);
				-webkit-animation: reflection 15s infinite ease-in-out;				
				animation: reflection 15s infinite ease-in-out;	
			}		
			.black .top, .black .back, .black .right, .black .bottom, .black .left, .black .top:before, .black .top:after, .black .right:before, .black .right:after, .black .bottom:before, .black .bottom:after, .black .left:before, .black .left:after {
				background: #121212;
			}	
			
			/**********************/ 
			/*   SLAB black back  */
			/**********************/ 
			
			.black-back {
				-webkit-transform: translate3D(2.38px,2.38px,-30.1px) scale3D(.98126,.99048,.167);
				transform: translate3D(2.38px,2.38px,-30.1px) scale3D(.98126,.99048,.167);
			}
			
			/**********************/ 
			/*     SLAB join	  */
			/**********************/ 
			
			.slab .join {
				width: 4px;
				height: 32px;
				background: #2c2c2c;
				box-shadow: inset 2px 0 1px #000, -1px 0 1px #a3a3a3;
				-webkit-transform: translate3D(418px,-1px,-1px);
				transform: translate3D(418px,-1px,-1px);
			}
			.slab .right .join:before, .slab .right .join:after, .slab .left .join:before, .slab .left .join:after, .slab .top .join:before, .slab .top .join:after {
				content: "";
				position: absolute;
				top: -1.6px;
				width: 4px;	
				height: 3px;
				background: #2c2c2c;
				box-shadow: inset 2px 0 1px #000, -1px 0 1px #a3a3a3;
				-webkit-transform: translateZ(1.1px) rotateX(-90deg);
				transform: translateZ(1.1px) rotateX(-90deg);
			}
			.slab .right .join:after, .slab .left .join:after, .slab .top .join:after {
				top: 30px;
			}
			.slab .left .join {
				-webkit-transform: translate3D(418px,-1px,.5px);
				transform: translate3D(418px,-1px,.5px);
			}
			.slab .left .join:before, .slab .left .join:after {
				-webkit-transform: translateZ(-1.1px) rotateX(-90deg);
				transform: translateZ(-1.1px) rotateX(-90deg);
			}
			.slab .top .join {
				-webkit-transform: translate3D(60px,-1px,-1px);
				transform: translate3D(60px,-1px,-1px);
			}
			
			/**********************/ 
			/*   DOCK connector   */
			/**********************/ 
			
			#dock {
				top: 50%;
				left: 50%;
				width: 80px;
				height: 11px;
				margin: -5.5px 0 0 -40px;
				background: #2c2c2c;
				background: -moz-linear-gradient(left,  #2c2c2c 0%, #141414 100%);
				background: -webkit-gradient(linear, left top, right top, color-stop(0%,#2c2c2c), color-stop(100%,#141414));
				background: -webkit-linear-gradient(left,  #2c2c2c 0%,#141414 100%);
				background: -o-linear-gradient(left,  #2c2c2c 0%,#141414 100%);
				background: -ms-linear-gradient(left,  #2c2c2c 0%,#141414 100%);
				background: linear-gradient(to right,  #2c2c2c 0%,#141414 100%);
				filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2c2c2c', endColorstr='#141414',GradientType=1 );
				border-radius: 4px;
				box-shadow: inset 1px -3px 3px #000, 0 0 2px #a3a3a3;
				-webkit-transform: translateZ(.5px);
				transform: translateZ(.5px);
			}
			#connector {
				top: 50%;
				left: 50%;
				width: 70px;
				height: 2px;
				margin: -1px 0 0 -35px;
				background: #333;
				box-shadow: inset 0 1px 0 #000;
			}
			
			/**********************/ 
			/*    DOCK screws     */
			/**********************/ 
			
			.screws {
				top: 50%;
				left: 50px;
				width: 8px;
				height: 8px;
				margin-top: -5px;
				border: 1px solid #575757;
				background: #747474;								
				text-align: center;
				font: bold 6px/8px Verdana, sans-serif;
				color: #909090;
				border-radius: 8px;
				box-shadow: 0 0 1px #a3a3a3;
				text-shadow: 0px 1px 0px rgba(0,0,0,.4);
				-webkit-transform: translateZ(1px);
				transform: translateZ(1px);
			}
			.screws-right {
				left: auto;
				right: 50px;
			}
			
			/**********************/ 
			/*      SPEAKER 	  */
			/**********************/ 
			
			.speaker {
				top: 50%;
				left: 15px;
				overflow: hidden;
				width: 28px;
				height: 9px;
				margin-top: -4.5px;
				background: #717274;
				background: -moz-linear-gradient(left,  #717274 0%, #b0b1b3 100%);
				background: -webkit-gradient(linear, left top, right top, color-stop(0%,#717274), color-stop(100%,#b0b1b3));
				background: -webkit-linear-gradient(left,  #717274 0%,#b0b1b3 100%);
				background: -o-linear-gradient(left,  #717274 0%,#b0b1b3 100%);
				background: -ms-linear-gradient(left,  #717274 0%,#b0b1b3 100%);
				background: linear-gradient(to right,  #717274 0%,#b0b1b3 100%);
				filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#717274', endColorstr='#b0b1b3',GradientType=1 );
				border-radius: 9px;
				box-shadow: inset 1px -4px 2px rgba(0,0,0,.5), 0 1px 2px #a3a3a3;
				-webkit-transform: translateZ(1px);
				transform: translateZ(1px);
			}
			.speaker-right {
				left: auto;
				right: 15px;
			}
			.speaker .dot, #speaker-front .dot {
				position: static;
				float: left;
				width: 1px;
				height: 1px;
				margin: .5px;
				background: #353638;
			}
			#speaker-front {
				top: 40px;
				left: 50%;
				width: 48px;
				height: 6px;
				margin-left: -24px;
				overflow: hidden;
				border-top: 3px solid #3c3c3c;				
				background: #b0b1b3;
				background: -moz-linear-gradient(top,  #b0b1b3 0%, #717274 100%);
				background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b0b1b3), color-stop(100%,#717274));
				background: -webkit-linear-gradient(top,  #b0b1b3 0%,#717274 100%);
				background: -o-linear-gradient(top,  #b0b1b3 0%,#717274 100%);
				background: -ms-linear-gradient(top,  #b0b1b3 0%,#717274 100%);
				background: linear-gradient(to bottom,  #b0b1b3 0%,#717274 100%);
				filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b0b1b3', endColorstr='#717274',GradientType=0 );
				border-radius: 50px;				
				box-shadow: inset 2px 2px 2px rgba(0,0,0,.9), inset 1px 3px 1px rgba(255,255,255,.6), inset 1px -2px 1px rgba(255,255,255,.6);
				-webkit-transform: translateZ(20px);
				transform: translateZ(20px);
			}
			
			/**********************/ 
			/*      SIM card      */
			/**********************/ 
			
			#sim {
				top: 50%;
				left: 205px;				
				width: 74px;
				height: 8px;
				margin-top: -5px;
				border: 1px solid #727272;
				background: #969696;
				border-radius: 8px;
				box-shadow: inset 0 0 2px rgba(255,255,255,.4), 0 0 1px rgba(255,255,255,.7);
			}
			#hole {
				top: 50%;
				right: 2.5px;
				width: 4px;
				height: 4px;				
				margin-top: -2px;
				background: #2c2c2c;				
				border-radius: 4px;
				box-shadow: inset -1px 0 0 #000, 0 0 2px #a3a3a3;
			}
			
			/**********************/ 
			/*     HOME button    */
			/**********************/ 
			
			#home-button {
				top: 433.2px;
				left: 50%;
				width: 46.8px;
				height: 46.8px;
				margin-left: -24.4px;
				border: 1px solid #303030;
				background: #4d4d4d;
				background: -moz-linear-gradient(left,  #4d4d4d 0%, #0d0d0d 100%);
				background: -webkit-gradient(linear, left top, right top, color-stop(0%,#4d4d4d), color-stop(100%,#0d0d0d));
				background: -webkit-linear-gradient(left,  #4d4d4d 0%,#0d0d0d 100%);
				background: -o-linear-gradient(left,  #4d4d4d 0%,#0d0d0d 100%);
				background: -ms-linear-gradient(left,  #4d4d4d 0%,#0d0d0d 100%);
				background: linear-gradient(to right,  #4d4d4d 0%,#0d0d0d 100%);
				filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4d4d4d', endColorstr='#0d0d0d',GradientType=1 );
				border-radius: 50px;
				box-shadow: inset 0 0 2px #000;				
				-webkit-transform: translateZ(20px);
				transform: translateZ(20px);
			}
			#square {
				top: 50%;
				left: 50%;
				width: 13.2px;
				height: 13.2px;
				margin: -8.6px 0 0 -8.6px;
				border: 2px solid #eee;
				border-radius: 4px;
			}
			
			/**********************/ 
			/*   SCREEN display   */
			/**********************/

			#screen {
				top: 86.7px;
				left: 50%;
				width: 218px;
				height: 328.2px;
				margin-left: -109px;
				background: #000;
				-webkit-transform: translateZ(20px);
				transform: translateZ(20px);
			}
			#screen:after {
				content:"";
				position: absolute;
				top: 0;
				right: 0;
				left: 0;
				height: 5px;
				box-shadow: inset 2px 2px 5px rgba(0,0,0,.9);
				-webkit-transform: translateZ(1px);	
				transform: translateZ(1px);
			}
			video {
				position: absolute;
				top: 328.2px;
				width: 328.2px;
				height: 218px;
				-webkit-transform-origin: 0 0 0;
				transform-origin: 0 0 0;
				-webkit-transform: translateZ(.5px) rotateZ(-90deg);	
		.........完整代码请登录后点击上方下载按钮下载查看

网友评论0