html中空链接,CSS3 中空的盒子

CSS

语言：

CSSSCSS

确定

/* [Vars] *********************************************************/

body {

background-color: #6bb9f0;

}

.boxes {

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

}

.shadow {

position: absolute;

bottom: -60px;

width: 100px;

height: 100px;

background-color: #464646;

border-radius: 50%;

transition: all 300ms ease;

transform: rotateX(-45deg);

opacity: 0;

/* [Box] *********************************************************/

}

.scene {

display: inline-block;

margin: 60px;

width: 100px;

height: 50px;

perspective: 1800px;

}

.box {

position: relative;

width: inherit;

height: inherit;

transform-style: preserve-3d;

transform: rotateX(-45deg) rotateY(45deg);

transition: all 300ms ease;

-webkit-transition: all 300ms ease;

-moz-transition: all 300ms ease;

cursor: pointer;

z-index: 10;

}

.box:hover {

transform: rotateX(-45deg) rotateY(135deg) translateY(-40px);

}

.box:hover + .shadow {

opacity: 0.1;

}

.face {

position: absolute;

width: inherit;

height: inherit;

}

.top {

width: inherit;

height: 25px;

}

.outer {

width: inherit;

height: inherit;

}

.bottom {

width: inherit;

height: 25px;

}

.inner {

width: 50px;

height: inherit;

}

.top.front {

transform: rotateX(90deg) translate3d(0, 37.5px, 12.5px);

}

.top.back {

transform: rotateX(90deg) translate3d(0, -37.5px, 12.5px);

}

.top.left {

transform: rotateY(90deg) rotateX(90deg) translate3d(0, 37.5px, 12.5px);

}

.top.right {

transform: rotateY(90deg) rotateX(90deg) translate3d(0, -37.5px, 12.5px);

}

.outer.front {

transform: translate3d(0, 0, 50px);

}

.outer.back {

transform: rotateY(180deg) translate3d(0, 0, 50px);

}

.outer.left {

transform: rotateY(-90deg) translate3d(0, 0, 50px);

}

.outer.right {

transform: rotateY(90deg) translate3d(0, 0, 50px);

}

.bottom.front {

transform: rotateX(-90deg) translate3d(0, 37.5px, 37.5px);

}

.bottom.back {

transform: rotateX(-90deg) translate3d(0, -37.5px, 37.5px);

}

.bottom.left {

transform: rotateY(-90deg) rotateX(-90deg) translate3d(0, 37.5px, 37.5px);

}

.bottom.right {

transform: rotateY(-90deg) rotateX(-90deg) translate3d(0, -37.5px, 37.5px);

}

.inner.front {

transform: translate3d(25px, 0, 25px);

}

.inner.back {

transform: rotateY(180deg) translate3d(-25px, 0, 25px);

}

.inner.left {

transform: rotateY(90deg) translate3d(0, 0, 0px);

}

.inner.right {

transform: rotateY(90deg) translate3d(0, 0, 50px);

}

#first .face {

background-color: #d74142;

}

#first .bottom {

background-color: #931f20;

/* [Shading] *********************************************************/

}

#first .outer.front,

#first .outer.back,

#first .inner.front,

#first .inner.back {

background-color: #bd2829;

}

#first .outer.left,

#first .inner.right {

background-color: #931f20;

}

#second .face {

background-color: #be90d4;

}

#second .bottom {

background-color: #9347b7;

}

#second .outer.front,

#second .outer.back,

#second .inner.front,

#second .inner.back {

background-color: #a86bc6;

}

#second .outer.left,

#second .inner.right {

background-color: #9347b7;

}

#third .face {

background-color: #f4d03f;

}

#third .bottom {

background-color: #c29e0b;

}

#third .outer.front,

#third .outer.back,

#third .inner.front,

#third .inner.back {

background-color: #f1c40f;

}

#third .outer.left,

#third .inner.right {

background-color: #c29e0b;

/* [Media] *********************************************************/

}

@media (max-width: 1335px) {

.scene {

display: block;

margin-bottom: 100px;

}

}