HTML中盒子垂直炸开,CSS3 3D盒子分解

CSS

语言：

CSSSCSS

确定

/* demo styles */

html,

body {

height: 100%;

}

body {

display: -webkit-box;

display: -moz-box;

display: box;

display: -webkit-flex;

display: -moz-flex;

display: -ms-flexbox;

display: flex;

-webkit-box-orient: vertical;

-moz-box-orient: vertical;

box-orient: vertical;

-webkit-box-direction: normal;

-moz-box-direction: normal;

box-direction: normal;

-webkit-flex-direction: column;

-moz-flex-direction: column;

flex-direction: column;

-ms-flex-direction: column;

-webkit-box-align: center;

-moz-box-align: center;

box-align: center;

-webkit-align-items: center;

-moz-align-items: center;

-ms-align-items: center;

-o-align-items: center;

align-items: center;

-ms-flex-align: center;

-webkit-box-pack: center;

-moz-box-pack: center;

box-pack: center;

-webkit-justify-content: center;

-moz-justify-content: center;

-ms-justify-content: center;

-o-justify-content: center;

justify-content: center;

-ms-flex-pack: center;

width: 100%;

margin: 0;

font-family: "Open Sans", Arial, Helvetica, sans-serif !important;

min-width: 420px;

}

html,

body {

background: whitesmoke;

margin: 0;

padding: 0;

}

.view {

width: 128px;

height: 128px;

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

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

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

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

transform-style: preserve-3d;

-webkit-transform: rotate3d(1, 1, 1, 45deg);

-moz-transform: rotate3d(1, 1, 1, 45deg);

-ms-transform: rotate3d(1, 1, 1, 45deg);

-o-transform: rotate3d(1, 1, 1, 45deg);

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

-webkit-transition: all 0.5s ease-in-out;

-moz-transition: all 0.5s ease-in-out;

transition: all 0.5s ease-in-out;

}

.view:hover {

-webkit-transform: rotate3d(1, 1, 1, 180deg);

-moz-transform: rotate3d(1, 1, 1, 180deg);

-ms-transform: rotate3d(1, 1, 1, 180deg);

-o-transform: rotate3d(1, 1, 1, 180deg);

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

}

.view:hover .top {

-webkit-transform: rotate3D(1, 0, 0, 90deg) translate3d(0, 0, 192px);

-moz-transform: rotate3D(1, 0, 0, 90deg) translate3d(0, 0, 192px);

-ms-transform: rotate3D(1, 0, 0, 90deg) translate3d(0, 0, 192px);

-o-transform: rotate3D(1, 0, 0, 90deg) translate3d(0, 0, 192px);

transform: rotate3D(1, 0, 0, 90deg) translate3d(0, 0, 192px);

}

.view:hover .bottom {

-webkit-transform: rotate3D(1, 0, 0, 90deg) translate3d(0, 0, -192px);

-moz-transform: rotate3D(1, 0, 0, 90deg) translate3d(0, 0, -192px);

-ms-transform: rotate3D(1, 0, 0, 90deg) translate3d(0, 0, -192px);

-o-transform: rotate3D(1, 0, 0, 90deg) translate3d(0, 0, -192px);

transform: rotate3D(1, 0, 0, 90deg) translate3d(0, 0, -192px);

}

.view:hover .right {

-webkit-transform: rotate3d(0, 1, 0, 90deg) translate3d(0, 0, -192px);

-moz-transform: rotate3d(0, 1, 0, 90deg) translate3d(0, 0, -192px);

-ms-transform: rotate3d(0, 1, 0, 90deg) translate3d(0, 0, -192px);

-o-transform: rotate3d(0, 1, 0, 90deg) translate3d(0, 0, -192px);

transform: rotate3d(0, 1, 0, 90deg) translate3d(0, 0, -192px);

}

.view:hover .left {

-webkit-transform: rotate3d(0, 1, 0, 90deg) translate3d(0, 0, 192px);

-moz-transform: rotate3d(0, 1, 0, 90deg) translate3d(0, 0, 192px);

-ms-transform: rotate3d(0, 1, 0, 90deg) translate3d(0, 0, 192px);

-o-transform: rotate3d(0, 1, 0, 90deg) translate3d(0, 0, 192px);

transform: rotate3d(0, 1, 0, 90deg) translate3d(0, 0, 192px);

}

.view:hover .front {

-webkit-transform: rotate3d(0, 0, 0, 0deg) translate3d(0, 0, 192px);

-moz-transform: rotate3d(0, 0, 0, 0deg) translate3d(0, 0, 192px);

-ms-transform: rotate3d(0, 0, 0, 0deg) translate3d(0, 0, 192px);

-o-transform: rotate3d(0, 0, 0, 0deg) translate3d(0, 0, 192px);

transform: rotate3d(0, 0, 0, 0deg) translate3d(0, 0, 192px);

}

.view:hover .back {

-webkit-transform: rotate3d(0, 1, 0, 180deg) translate3d(0, 0, 192px);

-moz-transform: rotate3d(0, 1, 0, 180deg) translate3d(0, 0, 192px);

-ms-transform: rotate3d(0, 1, 0, 180deg) translate3d(0, 0, 192px);

-o-transform: rotate3d(0, 1, 0, 180deg) translate3d(0, 0, 192px);

transform: rotate3d(0, 1, 0, 180deg) translate3d(0, 0, 192px);

}

.face {

width: 128px;

height: 128px;

font-size: 64px;

overflow: hidden;

position: absolute;

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

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

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

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

transform-style: preserve-3d;

-webkit-transition: all 0.5s ease-in-out;

-moz-transition: all 0.5s ease-in-out;

transition: all 0.5s ease-in-out;

opacity: 0.5;

}

.bottom {

-webkit-transform: rotate3D(1, 0, 0, 90deg) translate3d(0, 0, -64px);

-moz-transform: rotate3D(1, 0, 0, 90deg) translate3d(0, 0, -64px);

-ms-transform: rotate3D(1, 0, 0, 90deg) translate3d(0, 0, -64px);

-o-transform: rotate3D(1, 0, 0, 90deg) translate3d(0, 0, -64px);

transform: rotate3D(1, 0, 0, 90deg) translate3d(0, 0, -64px);

background: purple;

}

.back {

-webkit-transform: rotate3d(0, 1, 0, 180deg) translate3d(0, 0, 64px);

-moz-transform: rotate3d(0, 1, 0, 180deg) translate3d(0, 0, 64px);

-ms-transform: rotate3d(0, 1, 0, 180deg) translate3d(0, 0, 64px);

-o-transform: rotate3d(0, 1, 0, 180deg) translate3d(0, 0, 64px);

transform: rotate3d(0, 1, 0, 180deg) translate3d(0, 0, 64px);

background: green;

}

.left {

-webkit-transform: rotate3d(0, 1, 0, 90deg) translate3d(0, 0, 64px);

-moz-transform: rotate3d(0, 1, 0, 90deg) translate3d(0, 0, 64px);

-ms-transform: rotate3d(0, 1, 0, 90deg) translate3d(0, 0, 64px);

-o-transform: rotate3d(0, 1, 0, 90deg) translate3d(0, 0, 64px);

transform: rotate3d(0, 1, 0, 90deg) translate3d(0, 0, 64px);

background: red;

}

.right {

-webkit-transform: rotate3d(0, 1, 0, 90deg) translate3d(0, 0, -64px);

-moz-transform: rotate3d(0, 1, 0, 90deg) translate3d(0, 0, -64px);

-ms-transform: rotate3d(0, 1, 0, 90deg) translate3d(0, 0, -64px);

-o-transform: rotate3d(0, 1, 0, 90deg) translate3d(0, 0, -64px);

transform: rotate3d(0, 1, 0, 90deg) translate3d(0, 0, -64px);

background: orange;

}

.front {

-webkit-transform: rotate3d(0, 0, 0, 0deg) translate3d(0, 0, 64px);

-moz-transform: rotate3d(0, 0, 0, 0deg) translate3d(0, 0, 64px);

-ms-transform: rotate3d(0, 0, 0, 0deg) translate3d(0, 0, 64px);

-o-transform: rotate3d(0, 0, 0, 0deg) translate3d(0, 0, 64px);

transform: rotate3d(0, 0, 0, 0deg) translate3d(0, 0, 64px);

background: blue;

}

.top {

-webkit-transform: rotate3D(1, 0, 0, 90deg) translate3d(0, 0, 64px);

-moz-transform: rotate3D(1, 0, 0, 90deg) translate3d(0, 0, 64px);

-ms-transform: rotate3D(1, 0, 0, 90deg) translate3d(0, 0, 64px);

-o-transform: rotate3D(1, 0, 0, 90deg) translate3d(0, 0, 64px);

transform: rotate3D(1, 0, 0, 90deg) translate3d(0, 0, 64px);

background: yellow;

}