php立方体相册源码,css+html实现立方体相册

cube

* {

margin: 0;

padding: 0;

}

body {

background: #333;

}

ul {

width: 300px;

height: 300px;

position: absolute;

top: 0;

bottom: 0;

left: 0;

right: 0;

margin: auto;

/*3d空间*/

transform-style: preserve-3d;

animation: box 20s linear infinite;

}

@keyframes box {

/*3d旋转 x y z deg*/

from {

transform: rotate3d(0, 0, 0, 0deg);

}

to {

transform: rotate3d(1, 1, 1, 360deg);

}

}

li {

width: 300px;

height: 300px;

list-style: none;

border: 1px solid black;

position: absolute;

opacity: 0.8;

box-shadow: 0px 0px 10px white;

}

li:nth-child(1) {

background: url(./../../正面.jpg);

background-position: center;

background-size: cover;

transform: translateZ(150px);

}

/*后*/

li:nth-child(2) {

background: url(./../../反面.jpg);

background-position: center;

background-size: cover;

transform: translateZ(-150px);

}

/*左*/

li:nth-child(3) {

background: url(./../../xuanjiezhimou.jpg);

background-position: center;

background-size: cover;

transform: rotateY(90deg) translateZ(-150px);

}

/*右*/

li:nth-child(4) {

background: url(./../../码上说故事_690.jpeg);

background-position: center;

background-size: cover;

transform: rotateY(90deg) translateZ(150px);

}

/*上*/

li:nth-child(5) {

background: url(./../../1.jpg);

background-position: center;

background-size: cover;

transform: rotateX(90deg) translateZ(150px);

}

li:nth-child(6) {

background: url(./../../3.PNG);

background-position: center;

background-size: cover;

transform: rotateX(90deg) translateZ(-150px);

}

ul:hover {

animation-play-state: paused;

}

————————————————

版权声明：本文为CSDN博主「一殿」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。

原文链接：https://blog.csdn.net/qq_41866776/article/details/96695938

————————————————

版权声明：本文为CSDN博主「一殿」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。

原文链接：https://blog.csdn.net/qq_41866776/article/details/96695938

标签：相册,..,translateZ,transform,li,html,background,position,css

来源： https://www.cnblogs.com/ciscolee/p/12386819.html