div+css实现三维iphone苹果4手机效果代码
代码语言: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.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