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

比眉伴天荒 2022-10-07 07:57 148阅读 0赞

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);

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

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 3分钟快速掌握Css弹性盒子（伸缩盒子）布局

相关 css3盒子定位整理

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

相关在HTML中计算立体盒子面积,CSS3之设计动态立体盒子

相关可控制的CSS3D盒子动画

相关 DIV+CSS两种盒子模型（W3C盒子与IE盒子）

相关 css盒子模型

相关盒子端 CSS 动画性能提升研究

相关 CSS3总结五：弹性盒子(flex)、弹性盒子布局

相关 css 怪异盒子模型(ie盒子)