魔方html语言,魔方.html · 筱飞/code_array - Gitee.com

小魔方

li {

list-style: none;

}

.will_rotate{

width: 150px;

height: 150px;

margin: 0 auto;

position: relative;

}

.rotate_parent .tip_front {

-webkit-transform: translateZ(50px);

transform: translateZ(50px);

}

.rotate_parent .tip_back {

-webkit-transform: translateZ(-50px);

transform: translateZ(-50px);

}

.rotate_parent .tip_right {

-webkit-transform: rotateY(90deg) translateZ(50px);

transform: rotateY(90deg) translateZ(50px);

}

.rotate_parent .tip_left {

-webkit-transform: rotateY(90deg) translateZ(-50px);

transform: rotateY(90deg) translateZ(-50px);

}

.rotate_parent .tip_top {

-webkit-transform: rotateX(90deg) translateZ(50px);

transform: rotateX(90deg) translateZ(50px);

}

.rotate_parent .tip_bottom {

-webkit-transform: rotateX(90deg) translateZ(-50px);

transform: rotateX(90deg) translateZ(-50px);

}

.rotate_parent .tip_floor {

box-shadow: -300px 0 50px rgba(0,0,0,.3);

-webkit-backface-visibility: visible;

backface-visibility: visible;

width: 110px;

height: 110px;

left: 295px;

background-color: transparent;

-webkit-transform: rotateX(90deg) translateZ(-60px);

transform: rotateX(90deg) translateZ(-60px);

}

.rotate_parent {

position: absolute;

display: block;

width: 100%;

height: 100%;

padding: 0;

/* margin: -50px 0; */

-webkit-transform-origin: 50px 50px;

transform-origin: 50px 50px;

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

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

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

transform-style: preserve-3d;

-webkit-animation: willRotate 3s ease-in-out infinite 2s;

animation: willRotate 3s ease-in-out infinite alternate;

top: 20%;

/* left: 50%; */

}

.rotate_parent, .rotate_parent li {

position: absolute;

display: block;

}

.rotate_parent .tip_back, .rotate_parent .tip_front, .rotate_parent .tip_left, .rotate_parent .tip_right, .rotate_parent .tip_top {

background: radial-gradient(transparent 30%,rgba(126,17,91,.2) 100%);

}

.rotate_parent li {

width: 100px;

height: 100px;

transition: -webkit-transform 1s ease-in-out;

transition: transform 1s ease-in-out;

}

.rotate_parent, .rotate_parent li {

position: absolute;

display: block;

}

@keyframes willRotate{

0%{

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

}

50%{

transform:rotateX(-33.5deg) rotateY(180deg);

}

100%{

transform:rotateX(-33.5deg) rotateY(360deg);

}

}

@-webkit-keyframes willRotate{

0%{

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

}

50%{

transform:rotateX(-33.5deg) rotateY(180deg);

}

100%{

transform:rotateX(-33.5deg) rotateY(360deg);

}

}

@-moz-keyframes willRotate{

0%{

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

}

50%{

transform:rotateX(-33.5deg) rotateY(180deg);

}

100%{

transform:rotateX(-33.5deg) rotateY(360deg);

}

}

@-o-keyframes willRotate{

0%{

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

}

50%{

transform:rotateX(-33.5deg) rotateY(180deg);

}

100%{

transform:rotateX(-33.5deg) rotateY(360deg);

}

}

一键复制

编辑

Web IDE

原始数据

按行查看

历史