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

代码语言：html

所属分类：三维

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

下面为部分代码预览，完整代码请点击下载或在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..........完整代码请登录后点击上方下载按钮下载查看