html盒子触发打开,CSS3 盒子打开的动画

CSS

语言：

CSSSCSS

确定

html,

body {

height: 100%;

}

body {

font-size: 150px;

overflow: hidden;

/* transition: all .5s; */

perspective: 10em;

backface-visibility: hidden;

}

.container {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

transform-style: preserve-3d;

backface-visibility: hidden;

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

transition: all 1s;

}

body:hover .container {

transform: rotateY(-60deg) rotateX(-15deg);

}

.box {

display: block;

position: absolute;

left: 50%;

top: 50%;

width: 1em;

height: 1em;

/* border: 1px solid #f00; */

margin-left: -0.5em;

/* transform: rotateY(-30deg) rotateX(-15deg); */

margin-top: -0.5em;

/* @for $i from 0 to 15

{

.box:nth-child(# {$i + 1})

{

left: 100% * ($i % 5 + 0.5) / 5;

top: 100% * (floor($i / 5) + 0.5) / 3;

}

}*/

transform-style: preserve-3d;

}

.box .face {

box-sizing: border-box;

width: 1em;

height: 1em;

border: 1px solid #fff;

position: absolute;

top: 0;

left: 0;

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

background: radial-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.8));

}

.box .face:nth-child(1) {

transform: translateZ(-0.5em);

}

.box .face:nth-child(2) {

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

}

.box .face:nth-child(3) {

transform: rotateX(180deg) translateZ(-0.5em);

}

.box .face:nth-child(4) {

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

}

.box .face:nth-child(5) {

transform: rotateY(90deg) translateZ(-0.5em);

}

.box .face:nth-child(6) {

transform: rotateY(-90deg) translateZ(-0.5em);

}

.container .box {

animation: box 3s infinite;

}

.container .box .face:nth-child(2) {

animation: bottom 3s infinite;

}

.container .box .face:nth-child(3) {

animation: front 3s infinite;

}

.container .box .face:nth-child(4) {

animation: top 3s infinite;

}

.container .box .face:nth-child(5) {

animation: right 3s infinite;

}

.container .box .face:nth-child(6) {

animation: left 3s infinite;

}

@keyframes box {

from, 60% {

transform: translateZ(0em);

}

to {

transform: translateZ(1em);

}

}

@keyframes left {

from {

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

}

60%,

to {

transform: rotateY(-90deg) translate3d(-0.5em, 0, -0.5em) rotateY(180deg) translateX(0.5em);

}

}

@keyframes right {

from {

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

}

60%,

to {

transform: rotateY(90deg) translate3d(0.5em, 0, -0.5em) rotateY(-180deg) translateX(-0.5em);

}

}

@keyframes bottom {

from {

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

}

60%,

to {

transform: rotateX(90deg) translate3d(0, -0.5em, -0.5em) rotateX(-180deg) translateY(0.5em);

}

}

@keyframes top {

from {

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

}

60%,

to {

transform: rotateX(-90deg) translate3d(0, 0.5em, -0.5em) rotateX(180deg) translateY(-0.5em);

}

}

@keyframes front {

from {

transform: translate3d(0, -0.5em, -0.5em) rotateX(0deg) translateZ(1em) rotateX(0deg) translateY(0.5em);

}

60%,

to {

transform: translate3d(0, -0.5em, -0.5em) rotateX(180deg) translateZ(1em) rotateX(180deg) translateY(0.5em);

}

}