html5 盒子阴影效果,CSS3 带阴影效果的3D盒子效果

CSS

语言：

CSSSCSS

确定

.cube {

position: relative;

width: 3em;

height: 3em;

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

transform-style: preserve-3d;

}

.cube__side {

position: absolute;

top: 0;

left: 0;

width: 3em;

height: 3em;

background: #111;

opacity: 0.2;

}

.cube__side--top {

-webkit-transform: rotateX(-90deg) translate3d(0, 1.5em, -1.5em);

transform: rotateX(-90deg) translate3d(0, 1.5em, -1.5em);

}

.cube__side--right {

-webkit-transform: rotateY(90deg) translate3d(1.5em, 0, 1.5em);

transform: rotateY(90deg) translate3d(1.5em, 0, 1.5em);

}

.cube__side--back {

-webkit-transform: translate3d(0, 0, -3em);

transform: translate3d(0, 0, -3em);

}

.cube__side--left {

-webkit-transform: rotateY(-90deg) translate3d(-1.5em, 0, 1.5em);

transform: rotateY(-90deg) translate3d(-1.5em, 0, 1.5em);

}

.cube__side--bottom {

-webkit-transform: rotateX(90deg) translate3d(0, -1.5em, -1.5em);

transform: rotateX(90deg) translate3d(0, -1.5em, -1.5em);

}

/**/

.box {

position: relative;

width: 6em;

height: 6em;

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

transform-style: preserve-3d;

-webkit-transform: rotateX(60deg) rotateZ(0deg);

transform: rotateX(60deg) rotateZ(0deg);

-webkit-animation-name: move;

animation-name: move;

-webkit-animation-duration: 3000ms;

animation-duration: 3000ms;

-webkit-animation-iteration-count: infinite;

animation-iteration-count: infinite;

-webkit-animation-timing-function: linear;

animation-timing-function: linear;

}

.box__layer {

position: relative;

width: 6em;

height: 3em;

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

transform-style: preserve-3d;

}

.box__layer .cube {

position: absolute;

top: 0;

}

.box__layer .cube:nth-of-type(1) {

left: 0;

-webkit-transform: translate3d(0, 0, 1.5em);

transform: translate3d(0, 0, 1.5em);

}

.box__layer .cube:nth-of-type(2) {

left: 3em;

-webkit-transform: translate3d(0, 0, 1.5em);

transform: translate3d(0, 0, 1.5em);

}

.box__layer .cube:nth-of-type(3) {

left: 0;

-webkit-transform: translate3d(0, 0, -1.5em);

transform: translate3d(0, 0, -1.5em);

}

.box__layer .cube:nth-of-type(4) {

left: 3em;

-webkit-transform: translate3d(0, 0, -1.5em);

transform: translate3d(0, 0, -1.5em);

}

.box__shadow {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

-webkit-filter: blur(0.8em);

filter: blur(0.8em);

background: black;

-webkit-animation-name: shadow;

animation-name: shadow;

-webkit-animation-duration: 3000ms;

animation-duration: 3000ms;

-webkit-animation-iteration-count: infinite;

animation-iteration-count: infinite;

-webkit-animation-timing-function: linear;

animation-timing-function: linear;

}

/**/

@-webkit-keyframes move {

0% {

-webkit-transform: rotateX(60deg) rotateZ(0deg) translateZ(3em);

transform: rotateX(60deg) rotateZ(0deg) translateZ(3em);

}

50% {

-webkit-transform: rotateX(60deg) rotateZ(-180deg) translateZ(1.5em);

transform: rotateX(60deg) rotateZ(-180deg) translateZ(1.5em);

}

100% {

-webkit-transform: rotateX(60deg) rotateZ(-360deg) translateZ(3em);

transform: rotateX(60deg) rotateZ(-360deg) translateZ(3em);

}

}

@keyframes move {

0% {

-webkit-transform: rotateX(60deg) rotateZ(0deg) translateZ(3em);

transform: rotateX(60deg) rotateZ(0deg) translateZ(3em);

}

50% {

-webkit-transform: rotateX(60deg) rotateZ(-180deg) translateZ(1.5em);

transform: rotateX(60deg) rotateZ(-180deg) translateZ(1.5em);

}

100% {

-webkit-transform: rotateX(60deg) rotateZ(-360deg) translateZ(3em);

transform: rotateX(60deg) rotateZ(-360deg) translateZ(3em);

}

}

@-webkit-keyframes shadow {

0% {

opacity: 0.2;

-webkit-transform: translateZ(-12em) scale(0.8, 0.8);

transform: translateZ(-12em) scale(0.8, 0.8);

}

50% {

opacity: 0.3;

-webkit-transform: translateZ(-10.5em) scale(1, 1);

transform: translateZ(-10.5em) scale(1, 1);

}

100% {

opacity: 0.2;

-webkit-transform: translateZ(-12em) scale(0.8, 0.8);

transform: translateZ(-12em) scale(0.8, 0.8);

}

}

@keyframes shadow {

0% {

opacity: 0.2;

-webkit-transform: translateZ(-12em) scale(0.8, 0.8);

transform: translateZ(-12em) scale(0.8, 0.8);

}

50% {

opacity: 0.3;

-webkit-transform: translateZ(-10.5em) scale(1, 1);

transform: translateZ(-10.5em) scale(1, 1);

}

100% {

opacity: 0.2;

-webkit-transform: translateZ(-12em) scale(0.8, 0.8);

transform: translateZ(-12em) scale(0.8, 0.8);

}

}

/**/

body {

-webkit-perspective: 12em;

perspective: 12em;

-webkit-perspective-origin: 50% 50%;

perspective-origin: 50% 50%;

}

/**/

html,

body {

width: 100%;

height: 100%;

display: -webkit-box;

display: -webkit-flex;

display: -ms-flexbox;

display: flex;

-webkit-box-align: center;

-webkit-align-items: center;

-ms-flex-align: center;

align-items: center;

-webkit-box-pack: center;

-webkit-justify-content: center;

-ms-flex-pack: center;

justify-content: center;

background-color: #F5F5F5;

overflow: hidden;

}