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..........完整代码请登录后点击上方下载按钮下载查看