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) rot.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0