html53DVR书籍,CSS3基础教程 - 旋转的3D书本展览

CSS

语言：

CSSSCSS

确定

/* */

/* Image size */

/* offset angle for static views */

.stage {

width: 197.6px;

height: 260px;

perspective: 1000px;

perspective-origin: center center;

margin: 3%;

float: left;

outline: 1px #eee dashed;

}

figure {

display: block;

position: absolute;

width: 197.6px;

height: 260px;

background-color: #ddd;

}

.cube {

transform-style: preserve-3d;

transform: rotateY(0deg) translateX(-30px);

}

.front {

transform: translateZ(9.1px);

background: url("/uploads/160301/mysql.png") top right;

background-size: auto 100%;

}

.back {

transform: rotateY(180deg) translateZ(9.1px);

background: url("/uploads/160301/mysql.png") top left;

background-size: auto 100%;

}

.top {

transform: rotateX(90deg) rotateZ(90deg) translateZ(98.8px) translateY(-89.7px);

background: #fafafa;

width: 18.2px;

height: 197.6px;

}

.bottom {

transform: rotateX(-90deg) rotateZ(90deg) translateZ(161.2px) translateY(-89.7px);

background: #ccc;

width: 18.2px;

height: 197.6px;

-webkit-filter: drop-shadow(0 0 26px rgba(0, 0, 0, 0.75));

}

.left {

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

background: url("/uploads/160301/mysql.png") top center;

background-size: auto 100%;

width: 18.2px;

}

.right {

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

background: #ddd;

background-size: auto 100%;

width: 18.2px;

}

/* VIEWS */

.view-right .cube {

transform: rotateY(-37deg) translateX(-30px);

}

.view-left .cube {

transform: rotateY(37deg) translateX(-30px);

}

.animate .cube {

animation: rotate 20s infinite linear;

}

/* ANIMATION */

@-webkit-keyframes rotate {

0% {

transform: rotateY(0) translateX(-18.2px);

}

100% {

transform: rotateY(360deg) translateX(-18.2px);

}

}