java3d翻转纪念相册_抖音上很火的3D立体动态相册实现代码!

html代码

酷炫3d

• 

• 

• 

• 

• 

• 

1. 

2. 

3. 

4. 

5. 

6. 

复制代码

css重要的

@charset "utf-8";

*{

margin:0;

padding:0;

}

body{

max-width: 100%;

min-width: 100%;

height: 100%;

background-size: cover;

background-repeat: no-repeat;

background-attachment: fixed;

background-size:100% 100%;

position: absolute;

margin-left: auto;

margin-right: auto;

}

li{

list-style: none;

}

.box{

width:200px;

height:200px;

background-size: cover;

background-repeat: no-repeat;

background-attachment: fixed;

background-size:100% 100%;

position: absolute;

margin-left: 42%;

margin-top: 22%;

-webkit-transform-style:preserve-3d;

-webkit-transform:rotateX(13deg);

-webkit-animation:move 5s linear infinite;

}

.minbox{

width:100px;

height:100px;

position: absolute;

left:50px;

top:30px;

-webkit-transform-style:preserve-3d;

}

.minbox li{

width:100px;

height:100px;

position: absolute;

left:0;

top:0;

}

.minbox li:nth-child(1){

/*background: url(../img/01.png) no-repeat 0 0;*/

-webkit-transform:translateZ(50px);

}

.minbox li:nth-child(1) img{

width: 100%;

height: 100%;

}

.minbox li:nth-child(2) img{

width: 100%;

height: 100%;

}

.minbox li:nth-child(3) img{

width: 100%;

height: 100%;

}

.minbox li:nth-child(4) img{

width: 100%;

height: 100%;

}

.minbox li:nth-child(5) img{

width: 100%;

height: 100%;

}

.minbox li:nth-child(6) img{

width: 100%;

height: 100%;

}

.minbox li:nth-child(2){

/*background: url(../img/02.png) no-repeat 0 0;*/

-webkit-transform:rotateX(180deg) translateZ(50px);

}

.minbox li:nth-child(3){

/*background: url(../img/03.png) no-repeat 0 0;*/

-webkit-transform:rotateX(-90deg) translateZ(50px);

}

.minbox li:nth-child(4){

/*background: url(../img/04.png) no-repeat 0 0;*/

-webkit-transform:rotateX(90deg) translateZ(50px);

}

.minbox li:nth-child(5){

/*background: url(../img/05.png) no-repeat 0 0;*/

-webkit-transform:rotateY(-90deg) translateZ(50px);

}

.minbox li:nth-child(6){

/*background: url(../img/06.png) no-repeat 0 0;*/

-webkit-transform:rotateY(90deg) translateZ(50px);

}

.maxbox li:nth-child(1){

/*background: url(../img/1.png) no-repeat 0 0;*/

-webkit-transform:translateZ(50px);

}

.maxbox li:nth-child(2){

/*background: url(../img/2.png) no-repeat 0 0;*/

-webkit-transform:translateZ(50px);

}

.maxbox li:nth-child(3){

/*background: url(../img/3.png) no-repeat 0 0;*/

-webkit-transform:rotateX(-90deg) translateZ(50px);

}

.maxbox li:nth-child(4){

/*background: url(../img/4.png) no-repeat 0 0;*/

-webkit-transform:rotateX(90deg) translateZ(50px);

}

.maxbox li:nth-child(5){

/*background: url(../img/5.png) no-repeat 0 0;*/

-webkit-transform:rotateY(-90deg) translateZ(50px);

}

.maxbox li:nth-child(6){

/*background: url(../img/6.png) no-repeat 0 0;*/

-webkit-transform:rotateY(90deg) translateZ(50px);

}

.maxbox{

width: 800px;

height: 400px;

position: absolute;

left: 0;

top: -20px;

-webkit-transform-style: preserve-3d;

}

.maxbox li{

width: 200px;

height: 200px;

background: #fff;

border:1px solid #ccc;

position: absolute;

left: 0;

top: 0;

opacity: 0.2;

-webkit-transition:all 1s ease;

}

.maxbox li:nth-child(1){

-webkit-transform:translateZ(100px);

}

.maxbox li:nth-child(1) img{

width: 100%;

height: 100%;

}

.maxbox li:nth-child(2) img{

width: 100%;

height: 100%;

}

.maxbox li:nth-child(3) img{

width: 100%;

height: 100%;

}

.maxbox li:nth-child(4) img{

width: 100%;

height: 100%;

}

.maxbox li:nth-child(5) img{

width: 100%;

height: 100%;

}

.maxbox li:nth-child(6) img{

width: 100%;

height: 100%;

}

.maxbox li:nth-child(2){

-webkit-transform:rotateX(180deg) translateZ(100px);

}

.maxbox li:nth-child(3){

-webkit-transform:rotateX(-90deg) translateZ(100px);

}

.maxbox li:nth-child(4){

-webkit-transform:rotateX(90deg) translateZ(100px);

}

.maxbox li:nth-child(5){

-webkit-transform:rotateY(-90deg) translateZ(100px);

}

.maxbox li:nth-child(6){

-webkit-transform:rotateY(90deg) translateZ(100px);

}

.box:hover ol li:nth-child(1){

-webkit-transform:translateZ(300px);

width: 400px;

height: 400px;

opacity: 0.8;

left: -100px;

top: -100px;

}

.box:hover ol li:nth-child(2){

-webkit-transform:rotateX(180deg) translateZ(300px);

width: 400px;

height: 400px;

opacity: 0.8;

left: -100px;

top: -100px;

}

.box:hover ol li:nth-child(3){

-webkit-transform:rotateX(-90deg) translateZ(300px);

width: 400px;

height: 400px;

opacity: 0.8;

left: -100px;

top: -100px;

}

.box:hover ol li:nth-child(4){

-webkit-transform:rotateX(90deg) translateZ(300px);

width: 400px;

height: 400px;

opacity: 0.8;

left: -100px;

top: -100px;

}

.box:hover ol li:nth-child(5){

-webkit-transform:rotateY(-90deg) translateZ(300px);

width: 400px;

height: 400px;

opacity: 0.8;

left: -100px;

top: -100px;

}

.box:hover ol li:nth-child(6){

-webkit-transform:rotateY(90deg) translateZ(300px);

width: 400px;

height: 400px;

opacity: 0.8;

left: -100px;

top: -100px;

}

@keyframes move{

0%{

-webkit-transform: rotateX(13deg) rotateY(0deg);

}

100%{

-webkit-transform:rotateX(13deg) rotateY(360deg);

}

}复制代码

1.png 2.png~6.png是外层

01.png~06.png是里层

图片大小可随意设置 建议 外层100*100 里层400*400