css scale3d,CSS 3D轮转数字

Document

body{

background: #000;

}

.outer{

-webkit-perspective:800;

-webkit-perspective-origin: 50% 150px;

}

.inner{

position: relative;

top: 200px;

margin: auto;

width: 200px;

height: 200px;

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

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

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

transform-style: preserve-3d;

-webkit-animation: motion 10s linear infinite;

-o-animation: motion 10s linear infinite;

animation: motion 10s linear infinite;

/*  -webkit-transform: rotateX(-30deg);

-ms-transform: rotateX(-30deg);

-o-transform: rotateX(-30deg);

transform: rotateX(-30deg);*/

}

.card{

position: absolute;

width: 200px;

height: 200px;

background-color: rgba(255,255,255,.6);

color: #000;

border: 1px solid #fff;

border-radius: 15px;

-webkit-box-sizing: border-box;

-moz-box-sizing: border-box;

box-sizing: border-box;

font-size: 120px;

line-height: 200px;

text-align: center;

backface-visibility: visible;

}

@-webkit-keyframes motion {

from {  }

to { -webkit-transform: rotateY(-360deg);

-ms-transform: rotateY(-360deg);

-o-transform: rotateY(-360deg);

transform: rotateY(-360deg); }

}

/* .ob{

-webkit-transform: scale3d(0.8,0.8,0.8) translateZ(100px);

-ms-transform: scale3d(0.8,0.8,0.8) translateZ(100px);

-o-transform: scale3d(0.8,0.8,0.8) translateZ(100px);

transform: scale3d(0.8,0.8,0.8) translateZ(100px);

}*/

.box1{

-webkit-transform: scale3d(0.8,0.8,0.8) translateZ(375px);

/*-ms-transform: scale3d(0.8,0.8,0.8) translateZ(100px);

-o-transform: scale3d(0.8,0.8,0.8) translateZ(100px);

transform: scale3d(0.8,0.8,0.8) translateZ(100px);*/

}

.box2{

-webkit-transform: rotateY(30deg) scale3d(0.8,0.8,0.8) translateZ(375px);

/*-ms-transform: rotateY(30deg) scale3d(0.8,0.8,0.8) translateZ(100px);

-o-transform: rotateY(30deg) scale3d(0.8,0.8,0.8) translateZ(100px);

transform: rotateY(30deg) scale3d(0.8,0.8,0.8) translateZ(100px);*/

}

.box3{

-webkit-transform: rotateY(60deg) scale3d(0.8,0.8,0.8) translateZ(375px);

}

.box4{

-webkit-transform: rotateY(90deg) scale3d(0.8,0.8,0.8) translateZ(375px);

}

.box5{

-webkit-transform: rotateY(120deg) scale3d(0.8,0.8,0.8) translateZ(375px);

}

.box6{

-webkit-transform: rotateY(150deg) scale3d(0.8,0.8,0.8) translateZ(375px);

}

.box7{

-webkit-transform: rotateY(180deg) scale3d(0.8,0.8,0.8) translateZ(375px);

}

.box8{

-webkit-transform: rotateY(210deg) scale3d(0.8,0.8,0.8) translateZ(375px);

}

.box9{

-webkit-transform: rotateY(240deg) scale3d(0.8,0.8,0.8) translateZ(375px);

}

.box10{

-webkit-transform: rotateY(270deg) scale3d(0.8,0.8,0.8) translateZ(375px);

}

.box11{

-webkit-transform: rotateY(300deg) scale3d(0.8,0.8,0.8) translateZ(375px);

}

.box12{

-webkit-transform: rotateY(330deg) scale3d(0.8,0.8,0.8) translateZ(375px);

}

/* .box3{

-webkit-transform: rotateY(90deg) scale3d(0.8,0.8,0.8) translateZ(100px);

-ms-transform: rotateY(90deg) scale3d(0.8,0.8,0.8) translateZ(100px);

-o-transform: rotateY(90deg) scale3d(0.8,0.8,0.8) translateZ(100px);

transform: rotateY(90deg) scale3d(0.8,0.8,0.8) translateZ(100px);

}

.box4{

-webkit-transform: rotateY(180deg) scale3d(0.8,0.8,0.8) translateZ(100px);

-ms-transform: rotateY(180deg) scale3d(0.8,0.8,0.8) translateZ(100px);

-o-transform: rotateY(180deg) scale3d(0.8,0.8,0.8) translateZ(100px);

transform: rotateY(180deg) scale3d(0.8,0.8,0.8) translateZ(100px);

}

.box5{

-webkit-transform: rotateY(-90deg) scale3d(0.8,0.8,0.8) translateZ(100px);

-ms-transform: rotateY(-90deg) scale3d(0.8,0.8,0.8) translateZ(100px);

-o-transform: rotateY(-90deg) scale3d(0.8,0.8,0.8) translateZ(100px);

transform: rotateY(-90deg) scale3d(0.8,0.8,0.8) translateZ(100px);

}

.box6{

-webkit-transform: rotateX(-90deg) scale3d(0.8,0.8,0.8) translateZ(100px);

-ms-transform: rotateX(-90deg) scale3d(0.8,0.8,0.8) translateZ(100px);

-o-transform: rotateX(-90deg) scale3d(0.8,0.8,0.8) translateZ(100px);

transform: rotateX(-90deg) scale3d(0.8,0.8,0.8) translateZ(100px);

}*/

1

2

3

4

5

6

7

8

9

10

11

12