Awesome writing Css 3D

Demo : http://jsfiddle.net/love4all1080/W2cM3/

Html Code

   1:  <div class="plane">

   2:  <ul><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul>

   3:  <ul><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul>

   4:  <ul><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul>

   5:  <ul><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul>

   6:  <ul><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul>

   7:  <ul><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul>

   8:  <ul><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul>

   9:  <ul><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul>

  10:  <ul><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul>

  11:  <ul><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul>

  12:  <ul><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul>

  13:  <ul><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul>

  14:  </div>   

Css Code

   1:  .plane {width:100px; height:100px; margin:150px auto;

   2:   

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

   4:   

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

   6:   

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

   8:   

   9:  -moz-transform-origin:50px 50px;

  10:   

  11:  transform-origin: 50px 50px;

  12:   

  13:  -webkit-animation:spin 8s infinite linear;

  14:   

  15:  -moz-animation:spin 8s infinite linear;

  16:   

  17:  }

  18:   

  19:   

  20:  .plane ul {padding:0; margin:0; list-style:none; width:100%; height:100%; position:absolute;

  21:   

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

  23:   

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

  25:   

  26:  }

  27:   

  28:   

  29:   

  30:  .plane ul li {position:absolute; display:block;

  31:   

  32:  border-radius: 50px;

  33:   

  34:  opacity: 0.8;

  35:   

  36:  -webkit-backface-visibility: hidden;

  37:   

  38:  -moz-backface-visibility: hidden;

  39:   

  40:  }

  41:   

  42:   

  43:  .plane ul li:nth-child(1) {-moz-transform: rotateY(0deg) translateZ(187px); background:red;}

  44:   

  45:  .plane ul li:nth-child(2) {-moz-transform: rotateY(15deg) translateZ(187px); background:orange;}

  46:   

  47:  .plane ul li:nth-child(3) {-moz-transform: rotateY(30deg) translateZ(187px); background:yellow;}

  48:   

  49:  .plane ul li:nth-child(4) {-moz-transform: rotateY(45deg) translateZ(187px); background:green;}

  50:   

  51:  .plane ul li:nth-child(5) {-moz-transform: rotateY(60deg) translateZ(187px); background:blue;}

  52:   

  53:  .plane ul li:nth-child(6) {-moz-transform: rotateY(75deg) translateZ(187px); background:indigo;}

  54:   

  55:  .plane ul li:nth-child(7) {-moz-transform: rotateY(90deg) translateZ(187px); background:violet;}

  56:   

  57:  .plane ul li:nth-child(8) {-moz-transform: rotateY(105deg) translateZ(187px); background:indigo;}

  58:   

  59:  .plane ul li:nth-child(9) {-moz-transform: rotateY(120deg) translateZ(187px); background:blue;}

  60:   

  61:  .plane ul li:nth-child(10) {-moz-transform: rotateY(135deg) translateZ(187px); background:green;}

  62:   

  63:  .plane ul li:nth-child(11) {-moz-transform: rotateY(150deg) translateZ(187px); background:yellow;}

  64:   

  65:  .plane ul li:nth-child(12) {-moz-transform: rotateY(165deg) translateZ(187px); background:orange;}

  66:   

  67:  .plane ul li:nth-child(13) {-moz-transform: rotateY(180deg) translateZ(187px); background:red;}

  68:   

  69:  .plane ul li:nth-child(14) {-moz-transform: rotateY(195deg) translateZ(187px); background:orange;}

  70:   

  71:  .plane ul li:nth-child(15) {-moz-transform: rotateY(210deg) translateZ(187px); background:yellow;}

  72:   

  73:  .plane ul li:nth-child(16) {-moz-transform: rotateY(225deg) translateZ(187px); background:green;}

  74:   

  75:  .plane ul li:nth-child(17) {-moz-transform: rotateY(240deg) translateZ(187px); background:blue;}

  76:   

  77:  .plane ul li:nth-child(18) {-moz-transform: rotateY(255deg) translateZ(187px); background:indigo;}

  78:   

  79:  .plane ul li:nth-child(19) {-moz-transform: rotateY(270deg) translateZ(187px); background:violet;}

  80:   

  81:  .plane ul li:nth-child(20) {-moz-transform: rotateY(285deg) translateZ(187px); background:indigo;}

  82:   

  83:  .plane ul li:nth-child(21) {-moz-transform: rotateY(300deg) translateZ(187px); background:blue;}

  84:   

  85:  .plane ul li:nth-child(22) {-moz-transform: rotateY(315deg) translateZ(187px); background:green;}

  86:   

  87:  .plane ul li:nth-child(23) {-moz-transform: rotateY(330deg) translateZ(187px); background:yellow;}

  88:   

  89:  .plane ul li:nth-child(24) {-moz-transform: rotateY(345deg) translateZ(187px); background:orange;}

  90:   

  91:   

  92:   

  93:   

  94:   

  95:  .plane ul:nth-child(1) {-moz-transform: rotateX(0deg);}

  96:   

  97:  .plane ul:nth-child(2) {-moz-transform: rotateX(15deg);}

  98:   

  99:  .plane ul:nth-child(3) {-moz-transform: rotateX(30deg);}

 100:   

 101:  .plane ul:nth-child(4) {-moz-transform: rotateX(45deg);}

 102:   

 103:  .plane ul:nth-child(5) {-moz-transform: rotateX(60deg);}

 104:   

 105:  .plane ul:nth-child(6) {-moz-transform: rotateX(75deg);}

 106:   

 107:  .plane ul:nth-child(7) {-moz-transform: rotateX(89.9deg);}

 108:   

 109:  .plane ul:nth-child(8) {-moz-transform: rotateX(105deg);}

 110:   

 111:  .plane ul:nth-child(9) {-moz-transform: rotateX(120deg);}

 112:   

 113:  .plane ul:nth-child(10) {-moz-transform: rotateX(135deg);}

 114:   

 115:  .plane ul:nth-child(11) {-moz-transform: rotateX(150deg);}

 116:   

 117:  .plane ul:nth-child(12) {-moz-transform: rotateX(165deg);}

 118:   

 119:   

 120:   

 121:  .plane ul li:nth-child(1) {-webkit-transform: rotateY(0deg) translateZ(187px); width:70px; height:70px; left:15px; top:15px;}

 122:   

 123:  .plane ul li:nth-child(2) {-webkit-transform: rotateY(15deg) translateZ(187px); width:70px; height:70px; left:15px; top:15px;}

 124:   

 125:  .plane ul li:nth-child(3) {-webkit-transform: rotateY(30deg) translateZ(187px); width:64px; height:64px; left:18px; top:18px;}

 126:   

 127:  .plane ul li:nth-child(4) {-webkit-transform: rotateY(45deg) translateZ(187px); width:58px; height:58px; left:21px; top:21px;}

 128:   

 129:  .plane ul li:nth-child(5) {-webkit-transform: rotateY(60deg) translateZ(187px); width:54px; height:54px; left:23px; top:23px;}

 130:   

 131:  .plane ul li:nth-child(6) {-webkit-transform: rotateY(75deg) translateZ(187px); width:52px; height:52px; left:24px; top:24px;}

 132:   

 133:  .plane ul li:nth-child(7) {-webkit-transform: rotateY(90deg) translateZ(187px); width:50px; height:50px; left:25px; top:25px;}

 134:   

 135:  .plane ul li:nth-child(8) {-webkit-transform: rotateY(105deg) translateZ(187px); width:52px; height:52px; left:24px; top:24px;}

 136:   

 137:  .plane ul li:nth-child(9) {-webkit-transform: rotateY(120deg) translateZ(187px); width:54px; height:54px; left:23px; top:23px;}

 138:   

 139:  .plane ul li:nth-child(10) {-webkit-transform: rotateY(135deg) translateZ(187px); width:58px; height:58px; left:21px; top:21px;}

 140:   

 141:  .plane ul li:nth-child(11) {-webkit-transform: rotateY(150deg) translateZ(187px); width:64px; height:64px; left:18px; top:18px;}

 142:   

 143:  .plane ul li:nth-child(12) {-webkit-transform: rotateY(165deg) translateZ(187px); width:70px; height:70px; left:15px; top:15px;}

 144:   

 145:  .plane ul li:nth-child(13) {-webkit-transform: rotateY(180deg) translateZ(187px); width:70px; height:70px; left:15px; top:15px;}

 146:   

 147:  .plane ul li:nth-child(14) {-webkit-transform: rotateY(195deg) translateZ(187px);  width:70px; height:70px; left:15px; top:15px;}

 148:   

 149:  .plane ul li:nth-child(15) {-webkit-transform: rotateY(210deg) translateZ(187px); width:64px; height:64px; left:18px; top:18px;}

 150:   

 151:  .plane ul li:nth-child(16) {-webkit-transform: rotateY(225deg) translateZ(187px); width:58px; height:58px; left:21px; top:21px;}

 152:   

 153:  .plane ul li:nth-child(17) {-webkit-transform: rotateY(240deg) translateZ(187px); width:54px; height:54px; left:23px; top:23px;}

 154:   

 155:  .plane ul li:nth-child(18) {-webkit-transform: rotateY(255deg) translateZ(187px); width:52px; height:52px; left:24px; top:24px;}

 156:   

 157:  .plane ul li:nth-child(19) {-webkit-transform: rotateY(270deg) translateZ(187px); width:50px; height:50px; left:25px; top:25px;}

 158:   

 159:  .plane ul li:nth-child(20) {-webkit-transform: rotateY(285deg) translateZ(187px); width:52px; height:52px; left:24px; top:24px;}

 160:   

 161:  .plane ul li:nth-child(21) {-webkit-transform: rotateY(300deg) translateZ(187px); width:54px; height:54px; left:23px; top:23px;}

 162:   

 163:  .plane ul li:nth-child(22) {-webkit-transform: rotateY(315deg) translateZ(187px); width:58px; height:58px; left:21px; top:21px;}

 164:   

 165:  .plane ul li:nth-child(23) {-webkit-transform: rotateY(330deg) translateZ(187px); width:64px; height:64px; left:18px; top:18px;}

 166:   

 167:  .plane ul li:nth-child(24) {-webkit-transform: rotateY(345deg) translateZ(187px); width:70px; height:70px; left:15px; top:15px;}

 168:   

 169:   

 170:  .plane ul:nth-child(1) {-webkit-transform: rotateX(0deg);}

 171:   

 172:  .plane ul:nth-child(2) {-webkit-transform: rotateX(15deg);}

 173:   

 174:  .plane ul:nth-child(3) {-webkit-transform: rotateX(30deg);}

 175:   

 176:  .plane ul:nth-child(4) {-webkit-transform: rotateX(45deg);}

 177:   

 178:  .plane ul:nth-child(5) {-webkit-transform: rotateX(60deg);}

 179:   

 180:  .plane ul:nth-child(6) {-webkit-transform: rotateX(75deg);}

 181:   

 182:  .plane ul:nth-child(7) {-webkit-transform: rotateX(90deg);}

 183:   

 184:  .plane ul:nth-child(8) {-webkit-transform: rotateX(105deg);}

 185:   

 186:  .plane ul:nth-child(9) {-webkit-transform: rotateX(120deg);}

 187:   

 188:  .plane ul:nth-child(10) {-webkit-transform: rotateX(135deg);}

 189:   

 190:  .plane ul:nth-child(11) {-webkit-transform: rotateX(150deg);}

 191:   

 192:  .plane ul:nth-child(12) {-webkit-transform: rotateX(165deg);}

 193:   

 194:   

 195:   

 196:  .plane ul:nth-child(2) li:nth-child(19),

 197:   

 198:  .plane ul:nth-child(3) li:nth-child(19),

 199:   

 200:  .plane ul:nth-child(4) li:nth-child(19),

 201:   

 202:  .plane ul:nth-child(5) li:nth-child(19),

 203:   

 204:  .plane ul:nth-child(6) li:nth-child(19),

 205:   

 206:  .plane ul:nth-child(7) li:nth-child(19),

 207:   

 208:  .plane ul:nth-child(8) li:nth-child(19),

 209:   

 210:  .plane ul:nth-child(9) li:nth-child(19),

 211:   

 212:  .plane ul:nth-child(10) li:nth-child(19),

 213:   

 214:  .plane ul:nth-child(11) li:nth-child(19),

 215:   

 216:  .plane ul:nth-child(12) li:nth-child(19),

 217:   

 218:   

 219:   

 220:  .plane ul:nth-child(2) li:nth-child(18),

 221:   

 222:  .plane ul:nth-child(4) li:nth-child(18),

 223:   

 224:  .plane ul:nth-child(6) li:nth-child(18),

 225:   

 226:  .plane ul:nth-child(8) li:nth-child(18),

 227:   

 228:  .plane ul:nth-child(10) li:nth-child(18),

 229:   

 230:  .plane ul:nth-child(12) li:nth-child(18),

 231:   

 232:   

 233:   

 234:  .plane ul:nth-child(2) li:nth-child(20),

 235:   

 236:  .plane ul:nth-child(4) li:nth-child(20),

 237:   

 238:  .plane ul:nth-child(6) li:nth-child(20),

 239:   

 240:  .plane ul:nth-child(8) li:nth-child(20),

 241:   

 242:  .plane ul:nth-child(10) li:nth-child(20),

 243:   

 244:  .plane ul:nth-child(12) li:nth-child(20),

 245:   

 246:   

 247:   

 248:  .plane ul:nth-child(2) li:nth-child(7),

 249:   

 250:  .plane ul:nth-child(3) li:nth-child(7),

 251:   

 252:  .plane ul:nth-child(4) li:nth-child(7),

 253:   

 254:  .plane ul:nth-child(5) li:nth-child(7),

 255:   

 256:  .plane ul:nth-child(6) li:nth-child(7),

 257:   

 258:  .plane ul:nth-child(7) li:nth-child(7),

 259:   

 260:  .plane ul:nth-child(8) li:nth-child(7),

 261:   

 262:  .plane ul:nth-child(9) li:nth-child(7),

 263:   

 264:  .plane ul:nth-child(10) li:nth-child(7),

 265:   

 266:  .plane ul:nth-child(11) li:nth-child(7),

 267:   

 268:  .plane ul:nth-child(12) li:nth-child(7),

 269:   

 270:   

 271:   

 272:  .plane ul:nth-child(2) li:nth-child(6),

 273:   

 274:  .plane ul:nth-child(4) li:nth-child(6),

 275:   

 276:  .plane ul:nth-child(6) li:nth-child(6),

 277:   

 278:  .plane ul:nth-child(8) li:nth-child(6),

 279:   

 280:  .plane ul:nth-child(10) li:nth-child(6),

 281:   

 282:  .plane ul:nth-child(12) li:nth-child(6),

 283:   

 284:   

 285:   

 286:  .plane ul:nth-child(2) li:nth-child(8),

 287:   

 288:  .plane ul:nth-child(4) li:nth-child(8),

 289:   

 290:  .plane ul:nth-child(6) li:nth-child(8),

 291:   

 292:  .plane ul:nth-child(8) li:nth-child(8),

 293:   

 294:  .plane ul:nth-child(10) li:nth-child(8),

 295:   

 296:  .plane ul:nth-child(12) li:nth-child(8) {display:none;}

 297:   

 298:   

 299:   

 300:  @-webkit-keyframes spin {

 301:   

 302:  0% {-webkit-transform: rotateZ(0deg) rotateY(45deg) rotateX(0deg);}

 303:   

 304:  100% {-webkit-transform: rotateZ(360deg) rotateY(405deg) rotateX(360deg);}

 305:   

 306:  }

 307:   

 308:  @-moz-keyframes spin {

 309:   

 310:  0% {-moz-transform: rotateZ(0deg) rotateY(45deg) rotateX(0deg);}

 311:   

 312:  100% {-moz-transform: rotateZ(360deg) rotateY(405deg) rotateX(360deg);}

 313:   

 314:  }

 315:  ​

Categories: Css , Css3

If You Enjoyed This Post Please Take 5 Seconds To Share It.