css镶嵌,CSS3 图片的镶嵌特效

CSS

语言：

CSSSCSS

确定

html,

body {

height: 100%;

overflow: hidden;

}

.container {

position: absolute;

width: 150%;

height: 170%;

margin-top: -20%;

margin-left: -25%;

background: url("/uploads/150101/sky2.jpg");

transform-style: preserve-3d;

transform-origin: 50% 50%;

perspective: 1200px;

animation: rot 30s linear infinite;

}

.box {

position: absolute;

top: 50%;

left: 50%;

margin-left: -10em;

margin-top: -10em;

width: 20em;

height: 20em;

}

.wall,

.right,

.left,

.bottom,

.top,

.back {

width: 20em;

height: 20em;

background: url("/uploads/150101/sky2.jpg");

background-size: cover;

position: absolute;

}

.wall:before,

.right:before,

.left:before,

.bottom:before,

.top:before,

.back:before {

content: "";

position: absolute;

width: 100%;

height: 100%;

background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5) 0%, transparent 100%);

}

.right {

transform: rotateY(90deg) translateZ(10em) rotate(90deg);

}

.left {

transform: rotateY(90deg) translateZ(-10em) rotate(90deg);

}

.bottom {

transform: rotateX(90deg) translateZ(-10em);

}

.top {

transform: rotateX(90deg) translateZ(10em);

}

.back {

transform: translateZ(-10em);

}

.back:before {

background: rgba(0, 0, 0, 0.5);

}

@keyframes rot {

to {

transform: rotate(360deg);

}

}