酷炫骰子 3d html,CSS3 3D骰子动画

CSS

语言：

CSSSCSS

确定

main {

width: 100vw;

height: 100vh;

display: -webkit-box;

display: -webkit-flex;

display: -ms-flexbox;

display: flex;

-webkit-box-pack: center;

-webkit-justify-content: center;

-ms-flex-pack: center;

justify-content: center;

-webkit-box-align: center;

-webkit-align-items: center;

-ms-flex-align: center;

align-items: center;

}

.dice {

width: 60px;

height: 60px;

position: relative;

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

transform-style: preserve-3d;

-webkit-transform: rotateX(0deg) rotateY(0deg) translateX(0);

transform: rotateX(0deg) rotateY(0deg) translateX(0);

-webkit-animation-name: rotate;

animation-name: rotate;

-webkit-animation-iteration-count: infinite;

animation-iteration-count: infinite;

-webkit-animation-duration: 3s;

animation-duration: 3s;

-webkit-animation-timing-function: ease-in-out;

animation-timing-function: ease-in-out;

}

.dice.add-keyframe {

-webkit-animation-name: rotate, opacity;

animation-name: rotate, opacity;

}

.dice > div {

height: 60px;

width: 60px;

position: absolute;

background: #F76331;

}

.dice span {

width: 8px;

height: 8px;

background: #fff;

border-radius: 50%;

display: block;

position: absolute;

}

.dice .front {

-webkit-transform: rotateY(0deg) translateZ(30px);

transform: rotateY(0deg) translateZ(30px);

}

.dice .front span:nth-child(1) {

top: 10px;

left: 12px;

}

.dice .front span:nth-child(2) {

top: 10px;

right: 12px;

}

.dice .front span:nth-child(3) {

top: 26px;

left: 12px;

}

.dice .front span:nth-child(4) {

top: 26px;

right: 12px;

}

.dice .front span:nth-child(5) {

bottom: 10px;

left: 12px;

}

.dice .front span:nth-child(6) {

bottom: 10px;

right: 12px;

}

.dice .back {

-webkit-transform: rotateX(180deg) translateZ(30px);

transform: rotateX(180deg) translateZ(30px);

}

.dice .back span {

top: 26px;

left: 26px;

}

.dice .right {

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

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

}

.dice .right span:nth-child(1) {

top: 12px;

left: 12px;

}

.dice .right span:nth-child(2) {

top: 12px;

right: 12px;

}

.dice .right span:nth-child(3) {

top: 26px;

left: 26px;

}

.dice .right span:nth-child(4) {

bottom: 12px;

left: 12px;

}

.dice .right span:nth-child(5) {

bottom: 12px;

right: 12px;

}

.dice .left {

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

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

}

.dice .left span:nth-child(1) {

top: 12px;

right: 12px;

}

.dice .left span:nth-child(2) {

bottom: 12px;

left: 12px;

}

.dice .top {

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

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

}

.dice .top span:nth-child(1) {

top: 12px;

right: 12px;

}

.dice .top span:nth-child(2) {

bottom: 12px;

left: 12px;

}

.dice .top span:nth-child(3) {

bottom: 26px;

left: 26px;

}

.dice .bottom {

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

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

}

.dice .bottom span:nth-child(1) {

top: 12px;

right: 12px;

}

.dice .bottom span:nth-child(2) {

top: 12px;

left: 12px;

}

.dice .bottom span:nth-child(3) {

bottom: 12px;

left: 12px;

}

.dice .bottom span:nth-child(4) {

bottom: 12px;

right: 12px;

}

.button {

position: fixed;

bottom: 20px;

background: #f76939;

padding: 20px 40px;

border-radius: 4px;

color: #fff;

cursor: pointer;

}

@-webkit-keyframes opacity {

0% {

opacity: 1;

}

20% {

opacity: .5;

}

40% {

opacity: 1;

}

60% {

opacity: 1;

}

80% {

opacity: .5;

}

100% {

opacity: 1;

}

}

@keyframes opacity {

0% {

opacity: 1;

}

20% {

opacity: .5;

}

40% {

opacity: 1;

}

60% {

opacity: 1;

}

80% {

opacity: .5;

}

100% {

opacity: 1;

}

}

@-webkit-keyframes rotate {

0% {

-webkit-transform: rotateX(90deg) rotateY(360deg) rotateZ(0deg) translateX(0);

transform: rotateX(90deg) rotateY(360deg) rotateZ(0deg) translateX(0);

}

35% {

-webkit-transform: rotateX(-180deg) rotateY(-90deg) rotateZ(0deg) translateX(0);

transform: rotateX(-180deg) rotateY(-90deg) rotateZ(0deg) translateX(0);

}

45% {

-webkit-transform: rotateX(-180deg) rotateY(-90deg) rotateZ(0deg) translateX(0);

transform: rotateX(-180deg) rotateY(-90deg) rotateZ(0deg) translateX(0);

}

65% {

-webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(-360deg) translateX(0);

transform: rotateX(0deg) rotateY(0deg) rotateZ(-360deg) translateX(0);

}

75% {

-webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(-360deg) translateX(0);

transform: rotateX(0deg) rotateY(0deg) rotateZ(-360deg) translateX(0);

}

100% {

-webkit-transform: rotateX(90deg) rotateY(360deg) rotateZ(0deg) translateX(0);

transform: rotateX(90deg) rotateY(360deg) rotateZ(0deg) translateX(0);

}

}

@keyframes rotate {

0% {

-webkit-transform: rotateX(90deg) rotateY(360deg) rotateZ(0deg) translateX(0);

transform: rotateX(90deg) rotateY(360deg) rotateZ(0deg) translateX(0);

}

35% {

-webkit-transform: rotateX(-180deg) rotateY(-90deg) rotateZ(0deg) translateX(0);

transform: rotateX(-180deg) rotateY(-90deg) rotateZ(0deg) translateX(0);

}

45% {

-webkit-transform: rotateX(-180deg) rotateY(-90deg) rotateZ(0deg) translateX(0);

transform: rotateX(-180deg) rotateY(-90deg) rotateZ(0deg) translateX(0);

}

65% {

-webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(-360deg) translateX(0);

transform: rotateX(0deg) rotateY(0deg) rotateZ(-360deg) translateX(0);

}

75% {

-webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(-360deg) translateX(0);

transform: rotateX(0deg) rotateY(0deg) rotateZ(-360deg) translateX(0);

}

100% {

-webkit-transform: rotateX(90deg) rotateY(360deg) rotateZ(0deg) translateX(0);

transform: rotateX(90deg) rotateY(360deg) rotateZ(0deg) translateX(0);

}

}