minecraft-skinviewer.css 48 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359
  1. /*!
  2. * Copyright 2018 Robert Koszewski
  3. *
  4. * Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
  5. *
  6. * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
  7. *
  8. * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  9. */
  10. @keyframes spin {
  11. from {
  12. transform: rotateY(360deg);
  13. }
  14. to {
  15. transform: rotateY(0);
  16. }
  17. }
  18. @keyframes waving {
  19. 0% {
  20. transform: rotateX(-2deg);
  21. }
  22. 50% {
  23. transform: rotateX(2deg);
  24. }
  25. 100% {
  26. transform: rotateX(-2deg);
  27. }
  28. }
  29. .mc-face-viewer-4x {
  30. image-rendering: optimizeSpeed;
  31. /* Legal fallback */
  32. image-rendering: -moz-crisp-edges;
  33. /* Firefox */
  34. image-rendering: -o-crisp-edges;
  35. /* Opera */
  36. image-rendering: -webkit-optimize-contrast;
  37. /* Safari */
  38. image-rendering: optimize-contrast;
  39. /* CSS3 Proposed */
  40. image-rendering: crisp-edges;
  41. /* CSS4 Proposed */
  42. image-rendering: pixelated;
  43. /* CSS4 Proposed */
  44. -ms-interpolation-mode: nearest-neighbor;
  45. /* IE8+ */
  46. background-size: 256px;
  47. width: 32px;
  48. height: 32px;
  49. background-position: -32px -32px;
  50. overflow: hidden;
  51. display: inline-block;
  52. }
  53. .mc-face-viewer-4x::after {
  54. content: " ";
  55. width: 32px;
  56. height: 32px;
  57. background-size: 288px;
  58. background-image: inherit;
  59. background-position: -182px -38px;
  60. overflow: hidden;
  61. display: inline-block;
  62. }
  63. .mc-face-viewer-8x {
  64. image-rendering: optimizeSpeed;
  65. /* Legal fallback */
  66. image-rendering: -moz-crisp-edges;
  67. /* Firefox */
  68. image-rendering: -o-crisp-edges;
  69. /* Opera */
  70. image-rendering: -webkit-optimize-contrast;
  71. /* Safari */
  72. image-rendering: optimize-contrast;
  73. /* CSS3 Proposed */
  74. image-rendering: crisp-edges;
  75. /* CSS4 Proposed */
  76. image-rendering: pixelated;
  77. /* CSS4 Proposed */
  78. -ms-interpolation-mode: nearest-neighbor;
  79. /* IE8+ */
  80. background-size: 512px;
  81. width: 64px;
  82. height: 64px;
  83. background-position: -64px -64px;
  84. overflow: hidden;
  85. display: inline-block;
  86. }
  87. .mc-face-viewer-8x::after {
  88. content: " ";
  89. width: 64px;
  90. height: 64px;
  91. background-size: 576px;
  92. background-image: inherit;
  93. background-position: -364px -76px;
  94. overflow: hidden;
  95. display: inline-block;
  96. }
  97. .mc-skin-viewer-9x {
  98. width: 72px;
  99. height: 288px;
  100. margin: 15px auto 40px auto;
  101. perspective: 800px;
  102. perspective-origin: 50% 100px;
  103. transform-style: preserve-3d;
  104. background-image: none !important;
  105. image-rendering: optimizeSpeed;
  106. /* Legal fallback */
  107. image-rendering: -moz-crisp-edges;
  108. /* Firefox */
  109. image-rendering: -o-crisp-edges;
  110. /* Opera */
  111. image-rendering: -webkit-optimize-contrast;
  112. /* Safari */
  113. image-rendering: optimize-contrast;
  114. /* CSS3 Proposed */
  115. image-rendering: crisp-edges;
  116. /* CSS4 Proposed */
  117. image-rendering: pixelated;
  118. /* CSS4 Proposed */
  119. -ms-interpolation-mode: nearest-neighbor;
  120. /* IE8+ */
  121. }
  122. .mc-skin-viewer-9x.hide-accessories .accessory {
  123. display: none;
  124. }
  125. .mc-skin-viewer-9x.spin > .player {
  126. animation: spin 12s infinite linear;
  127. }
  128. .mc-skin-viewer-9x .player {
  129. transform-style: preserve-3d;
  130. }
  131. .mc-skin-viewer-9x .player .front,
  132. .mc-skin-viewer-9x .player .back,
  133. .mc-skin-viewer-9x .player .left,
  134. .mc-skin-viewer-9x .player .right,
  135. .mc-skin-viewer-9x .player .top,
  136. .mc-skin-viewer-9x .player .bottom {
  137. position: absolute;
  138. background-size: 576px;
  139. background-repeat: no-repeat;
  140. backface-visibility: hidden;
  141. }
  142. .mc-skin-viewer-9x .player .accessory {
  143. background-image: none;
  144. }
  145. .mc-skin-viewer-9x .player .accessory .front,
  146. .mc-skin-viewer-9x .player .accessory .back,
  147. .mc-skin-viewer-9x .player .accessory .left,
  148. .mc-skin-viewer-9x .player .accessory .right,
  149. .mc-skin-viewer-9x .player .accessory .top,
  150. .mc-skin-viewer-9x .player .accessory .bottom {
  151. backface-visibility: visible;
  152. }
  153. .mc-skin-viewer-9x .player > .head {
  154. position: absolute;
  155. transform-style: preserve-3d;
  156. width: 72px;
  157. height: 72px;
  158. margin: 0 auto;
  159. background-image: none !important;
  160. }
  161. .mc-skin-viewer-9x .player > .head .front,
  162. .mc-skin-viewer-9x .player > .head .back,
  163. .mc-skin-viewer-9x .player > .head .left,
  164. .mc-skin-viewer-9x .player > .head .right,
  165. .mc-skin-viewer-9x .player > .head .top,
  166. .mc-skin-viewer-9x .player > .head .bottom {
  167. width: 72px;
  168. height: 72px;
  169. }
  170. .mc-skin-viewer-9x .player > .head .front {
  171. background-position: -72px -72px;
  172. transform: rotateX(0deg) rotateY(0deg) translateX(0px) translateY(0px) translateZ(36px);
  173. }
  174. .mc-skin-viewer-9x .player > .head .back {
  175. background-position: -216px -72px;
  176. transform: rotateX(0deg) rotateY(180deg) translateX(0px) translateY(0px) translateZ(36px);
  177. }
  178. .mc-skin-viewer-9x .player > .head .right {
  179. background-position: 0px -72px;
  180. transform: rotateX(0deg) rotateY(270deg) translateX(0px) translateY(0px) translateZ(36px);
  181. }
  182. .mc-skin-viewer-9x .player > .head .left {
  183. background-position: -144px -72px;
  184. transform: rotateX(0deg) rotateY(90deg) translateX(0px) translateY(0px) translateZ(36px);
  185. }
  186. .mc-skin-viewer-9x .player > .head .top {
  187. background-position: -72px 0px;
  188. transform: rotateX(90deg) rotateY(0deg) translateX(0px) translateY(0px) translateZ(36px);
  189. }
  190. .mc-skin-viewer-9x .player > .head .bottom {
  191. background-position: -144px 0px;
  192. transform: rotateX(270deg) rotateY(0deg) rotateZ(180deg) translateX(0px) translateY(0px) translateZ(36px);
  193. }
  194. .mc-skin-viewer-9x .player > .head > .accessory {
  195. transform-style: preserve-3d;
  196. transform: scale3d(1.125, 1.125, 1.125) translateY(-3.5px);
  197. }
  198. .mc-skin-viewer-9x .player > .head > .accessory > .front {
  199. background-position: -360px -72px;
  200. }
  201. .mc-skin-viewer-9x .player > .head > .accessory > .back {
  202. background-position: -504px -72px;
  203. }
  204. .mc-skin-viewer-9x .player > .head > .accessory > .right {
  205. background-position: -288px -72px;
  206. }
  207. .mc-skin-viewer-9x .player > .head > .accessory > .left {
  208. background-position: -432px -72px;
  209. }
  210. .mc-skin-viewer-9x .player > .head > .accessory > .top {
  211. background-position: -360px 0px;
  212. }
  213. .mc-skin-viewer-9x .player > .head > .accessory > .bottom {
  214. background-position: -432px 0px;
  215. }
  216. .mc-skin-viewer-9x .player > .body {
  217. position: absolute;
  218. transform-style: preserve-3d;
  219. width: 72px;
  220. height: 72px;
  221. margin: 0 auto;
  222. transform: translateY(72px);
  223. background-image: none !important;
  224. }
  225. .mc-skin-viewer-9x .player > .body .front,
  226. .mc-skin-viewer-9x .player > .body .back,
  227. .mc-skin-viewer-9x .player > .body .left,
  228. .mc-skin-viewer-9x .player > .body .right,
  229. .mc-skin-viewer-9x .player > .body .top,
  230. .mc-skin-viewer-9x .player > .body .bottom {
  231. width: 72px;
  232. height: 108px;
  233. }
  234. .mc-skin-viewer-9x .player > .body .left,
  235. .mc-skin-viewer-9x .player > .body .right {
  236. width: 36px;
  237. }
  238. .mc-skin-viewer-9x .player > .body .top,
  239. .mc-skin-viewer-9x .player > .body .bottom {
  240. height: 36px;
  241. }
  242. .mc-skin-viewer-9x .player > .body .front {
  243. background-position: -180px -180px;
  244. transform: rotateX(0deg) rotateY(0deg) translateX(0px) translateY(0px) translateZ(18px);
  245. }
  246. .mc-skin-viewer-9x .player > .body .back {
  247. background-position: -288px -180px;
  248. transform: rotateX(0deg) rotateY(180deg) translateX(0px) translateY(0px) translateZ(18px);
  249. }
  250. .mc-skin-viewer-9x .player > .body .right {
  251. background-position: -144px -180px;
  252. transform: rotateX(0deg) rotateY(270deg) translateX(0px) translateY(0px) translateZ(18px);
  253. }
  254. .mc-skin-viewer-9x .player > .body .left {
  255. background-position: -252px -180px;
  256. transform: rotateX(0deg) rotateY(90deg) translateX(0px) translateY(0px) translateZ(54px);
  257. }
  258. .mc-skin-viewer-9x .player > .body .top {
  259. background-position: -180px -144px;
  260. transform: rotateX(90deg) rotateY(0deg) translateX(0px) translateY(0px) translateZ(18px);
  261. }
  262. .mc-skin-viewer-9x .player > .body .bottom {
  263. background-position: -252px -144px;
  264. transform: rotateX(270deg) rotateY(0deg) translateX(0px) translateY(0px) translateZ(90px);
  265. }
  266. .mc-skin-viewer-9x .player > .body > .accessory {
  267. transform-style: preserve-3d;
  268. transform: scale3d(1.0625, 1.0625, 1.0625) translateY(-3.375px);
  269. }
  270. .mc-skin-viewer-9x .player > .body > .accessory > .front {
  271. background-position: -180px -324px;
  272. }
  273. .mc-skin-viewer-9x .player > .body > .accessory > .back {
  274. background-position: -288px -324px;
  275. }
  276. .mc-skin-viewer-9x .player > .body > .accessory > .right {
  277. background-position: -144px -324px;
  278. }
  279. .mc-skin-viewer-9x .player > .body > .accessory > .left {
  280. background-position: -252px -324px;
  281. }
  282. .mc-skin-viewer-9x .player > .body > .accessory > .top {
  283. background-position: -180px -288px;
  284. }
  285. .mc-skin-viewer-9x .player > .body > .accessory > .bottom {
  286. background-position: -252px -288px;
  287. }
  288. .mc-skin-viewer-9x .player > .left-arm,
  289. .mc-skin-viewer-9x .player > .right-arm {
  290. position: absolute;
  291. transform-style: preserve-3d;
  292. width: 36px;
  293. height: 108px;
  294. margin: 0 auto;
  295. transform: translateY(72px) translateX(-36px);
  296. background-image: none !important;
  297. }
  298. .mc-skin-viewer-9x .player > .left-arm .front,
  299. .mc-skin-viewer-9x .player > .right-arm .front,
  300. .mc-skin-viewer-9x .player > .left-arm .back,
  301. .mc-skin-viewer-9x .player > .right-arm .back,
  302. .mc-skin-viewer-9x .player > .left-arm .left,
  303. .mc-skin-viewer-9x .player > .right-arm .left,
  304. .mc-skin-viewer-9x .player > .left-arm .right,
  305. .mc-skin-viewer-9x .player > .right-arm .right,
  306. .mc-skin-viewer-9x .player > .left-arm .top,
  307. .mc-skin-viewer-9x .player > .right-arm .top,
  308. .mc-skin-viewer-9x .player > .left-arm .bottom,
  309. .mc-skin-viewer-9x .player > .right-arm .bottom {
  310. width: 36px;
  311. height: 108px;
  312. }
  313. .mc-skin-viewer-9x .player > .left-arm .top,
  314. .mc-skin-viewer-9x .player > .right-arm .top,
  315. .mc-skin-viewer-9x .player > .left-arm .bottom,
  316. .mc-skin-viewer-9x .player > .right-arm .bottom {
  317. height: 36px;
  318. }
  319. .mc-skin-viewer-9x .player > .left-arm .front,
  320. .mc-skin-viewer-9x .player > .right-arm .front {
  321. background-position: -396px -180px;
  322. transform: rotateX(0deg) rotateY(0deg) translateX(0px) translateY(0px) translateZ(18px);
  323. }
  324. .mc-skin-viewer-9x .player > .left-arm .back,
  325. .mc-skin-viewer-9x .player > .right-arm .back {
  326. background-position: -468px -180px;
  327. transform: rotateX(0deg) rotateY(180deg) translateX(0px) translateY(0px) translateZ(18px);
  328. }
  329. .mc-skin-viewer-9x .player > .left-arm .right,
  330. .mc-skin-viewer-9x .player > .right-arm .right {
  331. background-position: -360px -180px;
  332. transform: rotateX(0deg) rotateY(270deg) translateX(0px) translateY(0px) translateZ(18px);
  333. }
  334. .mc-skin-viewer-9x .player > .left-arm .left,
  335. .mc-skin-viewer-9x .player > .right-arm .left {
  336. background-position: -432px -180px;
  337. transform: rotateX(0deg) rotateY(90deg) translateX(0px) translateY(0px) translateZ(18px);
  338. }
  339. .mc-skin-viewer-9x .player > .left-arm .top,
  340. .mc-skin-viewer-9x .player > .right-arm .top {
  341. background-position: -396px -144px;
  342. transform: rotateX(90deg) rotateY(0deg) translateX(0px) translateY(0px) translateZ(18px);
  343. }
  344. .mc-skin-viewer-9x .player > .left-arm .bottom,
  345. .mc-skin-viewer-9x .player > .right-arm .bottom {
  346. background-position: -432px -144px;
  347. transform: rotateX(270deg) rotateY(0deg) translateX(0px) translateY(0px) translateZ(90px);
  348. }
  349. .mc-skin-viewer-9x .player > .left-arm > .accessory,
  350. .mc-skin-viewer-9x .player > .right-arm > .accessory {
  351. transform-style: preserve-3d;
  352. transform: scale3d(1.0625, 1.0625, 1.0625) translateY(-3.375px);
  353. }
  354. .mc-skin-viewer-9x .player > .left-arm > .accessory .front,
  355. .mc-skin-viewer-9x .player > .right-arm > .accessory .front {
  356. background-position: -396px -324px;
  357. }
  358. .mc-skin-viewer-9x .player > .left-arm > .accessory .back,
  359. .mc-skin-viewer-9x .player > .right-arm > .accessory .back {
  360. background-position: -468px -324px;
  361. }
  362. .mc-skin-viewer-9x .player > .left-arm > .accessory .right,
  363. .mc-skin-viewer-9x .player > .right-arm > .accessory .right {
  364. background-position: -360px -324px;
  365. }
  366. .mc-skin-viewer-9x .player > .left-arm > .accessory .left,
  367. .mc-skin-viewer-9x .player > .right-arm > .accessory .left {
  368. background-position: -432px -324px;
  369. }
  370. .mc-skin-viewer-9x .player > .left-arm > .accessory .top,
  371. .mc-skin-viewer-9x .player > .right-arm > .accessory .top {
  372. background-position: -396px -288px;
  373. }
  374. .mc-skin-viewer-9x .player > .left-arm > .accessory .bottom,
  375. .mc-skin-viewer-9x .player > .right-arm > .accessory .bottom {
  376. background-position: -432px -288px;
  377. }
  378. .mc-skin-viewer-9x .player > .right-arm {
  379. transform: translateY(72px) translateX(72px) scaleX(-1);
  380. }
  381. .mc-skin-viewer-9x .player > .left-leg,
  382. .mc-skin-viewer-9x .player > .right-leg {
  383. position: absolute;
  384. transform-style: preserve-3d;
  385. width: 36px;
  386. height: 108px;
  387. margin: 0 auto;
  388. transform: translateY(180px);
  389. background-image: none !important;
  390. }
  391. .mc-skin-viewer-9x .player > .left-leg .front,
  392. .mc-skin-viewer-9x .player > .right-leg .front,
  393. .mc-skin-viewer-9x .player > .left-leg .back,
  394. .mc-skin-viewer-9x .player > .right-leg .back,
  395. .mc-skin-viewer-9x .player > .left-leg .left,
  396. .mc-skin-viewer-9x .player > .right-leg .left,
  397. .mc-skin-viewer-9x .player > .left-leg .right,
  398. .mc-skin-viewer-9x .player > .right-leg .right,
  399. .mc-skin-viewer-9x .player > .left-leg .top,
  400. .mc-skin-viewer-9x .player > .right-leg .top,
  401. .mc-skin-viewer-9x .player > .left-leg .bottom,
  402. .mc-skin-viewer-9x .player > .right-leg .bottom {
  403. width: 36px;
  404. height: 108px;
  405. }
  406. .mc-skin-viewer-9x .player > .left-leg .top,
  407. .mc-skin-viewer-9x .player > .right-leg .top,
  408. .mc-skin-viewer-9x .player > .left-leg .bottom,
  409. .mc-skin-viewer-9x .player > .right-leg .bottom {
  410. height: 36px;
  411. }
  412. .mc-skin-viewer-9x .player > .left-leg .front,
  413. .mc-skin-viewer-9x .player > .right-leg .front {
  414. background-position: -36px -180px;
  415. transform: rotateX(0deg) rotateY(0deg) translateX(0px) translateY(0px) translateZ(18px);
  416. }
  417. .mc-skin-viewer-9x .player > .left-leg .back,
  418. .mc-skin-viewer-9x .player > .right-leg .back {
  419. background-position: -108px -180px;
  420. transform: rotateX(0deg) rotateY(180deg) translateX(0px) translateY(0px) translateZ(18px);
  421. }
  422. .mc-skin-viewer-9x .player > .left-leg .right,
  423. .mc-skin-viewer-9x .player > .right-leg .right {
  424. background-position: 0px -180px;
  425. transform: rotateX(0deg) rotateY(270deg) translateX(0px) translateY(0px) translateZ(18px);
  426. }
  427. .mc-skin-viewer-9x .player > .left-leg .left,
  428. .mc-skin-viewer-9x .player > .right-leg .left {
  429. background-position: -72px -180px;
  430. transform: rotateX(0deg) rotateY(90deg) translateX(0px) translateY(0px) translateZ(18px);
  431. }
  432. .mc-skin-viewer-9x .player > .left-leg .top,
  433. .mc-skin-viewer-9x .player > .right-leg .top {
  434. background-position: -36px -144px;
  435. transform: rotateX(90deg) rotateY(0deg) translateX(0px) translateY(0px) translateZ(18px);
  436. }
  437. .mc-skin-viewer-9x .player > .left-leg .bottom,
  438. .mc-skin-viewer-9x .player > .right-leg .bottom {
  439. background-position: -72px -144px;
  440. transform: rotateX(270deg) rotateY(0deg) translateX(0px) translateY(0px) translateZ(90px);
  441. }
  442. .mc-skin-viewer-9x .player > .left-leg > .accessory,
  443. .mc-skin-viewer-9x .player > .right-leg > .accessory {
  444. transform-style: preserve-3d;
  445. transform: scale3d(1.03125, 1.03125, 1.03125) translateY(-1.6875px);
  446. }
  447. .mc-skin-viewer-9x .player > .left-leg > .accessory .front,
  448. .mc-skin-viewer-9x .player > .right-leg > .accessory .front {
  449. background-position: -36px -324px;
  450. }
  451. .mc-skin-viewer-9x .player > .left-leg > .accessory .back,
  452. .mc-skin-viewer-9x .player > .right-leg > .accessory .back {
  453. background-position: -108px -324px;
  454. }
  455. .mc-skin-viewer-9x .player > .left-leg > .accessory .right,
  456. .mc-skin-viewer-9x .player > .right-leg > .accessory .right {
  457. background-position: 0px -324px;
  458. }
  459. .mc-skin-viewer-9x .player > .left-leg > .accessory .left,
  460. .mc-skin-viewer-9x .player > .right-leg > .accessory .left {
  461. background-position: -72px -324px;
  462. }
  463. .mc-skin-viewer-9x .player > .left-leg > .accessory .top,
  464. .mc-skin-viewer-9x .player > .right-leg > .accessory .top {
  465. background-position: -36px -288px;
  466. }
  467. .mc-skin-viewer-9x .player > .left-leg > .accessory .bottom,
  468. .mc-skin-viewer-9x .player > .right-leg > .accessory .bottom {
  469. background-position: -72px -288px;
  470. }
  471. .mc-skin-viewer-9x .player > .right-leg {
  472. transform: translateY(180px) translateX(36px) scaleX(-1);
  473. }
  474. .mc-skin-viewer-9x:not(.legacy) .player > .right-arm {
  475. transform: translateY(72px) translateX(72px);
  476. }
  477. .mc-skin-viewer-9x:not(.legacy) .player > .right-arm .front {
  478. background-position: -324px -468px;
  479. }
  480. .mc-skin-viewer-9x:not(.legacy) .player > .right-arm .back {
  481. background-position: -396px -468px;
  482. }
  483. .mc-skin-viewer-9x:not(.legacy) .player > .right-arm .right {
  484. background-position: -288px -468px;
  485. }
  486. .mc-skin-viewer-9x:not(.legacy) .player > .right-arm .left {
  487. background-position: -360px -468px;
  488. }
  489. .mc-skin-viewer-9x:not(.legacy) .player > .right-arm .top {
  490. background-position: -324px -432px;
  491. }
  492. .mc-skin-viewer-9x:not(.legacy) .player > .right-arm .bottom {
  493. background-position: -360px -432px;
  494. }
  495. .mc-skin-viewer-9x:not(.legacy) .player > .right-arm > .accessory .front {
  496. background-position: -468px -468px;
  497. }
  498. .mc-skin-viewer-9x:not(.legacy) .player > .right-arm > .accessory .back {
  499. background-position: -540px -468px;
  500. }
  501. .mc-skin-viewer-9x:not(.legacy) .player > .right-arm > .accessory .right {
  502. background-position: -432px -468px;
  503. }
  504. .mc-skin-viewer-9x:not(.legacy) .player > .right-arm > .accessory .left {
  505. background-position: -504px -468px;
  506. }
  507. .mc-skin-viewer-9x:not(.legacy) .player > .right-arm > .accessory .top {
  508. background-position: -468px -432px;
  509. }
  510. .mc-skin-viewer-9x:not(.legacy) .player > .right-arm > .accessory .bottom {
  511. background-position: -504px -432px;
  512. }
  513. .mc-skin-viewer-9x:not(.legacy) .player > .right-leg {
  514. transform: translateY(180px) translateX(36px);
  515. }
  516. .mc-skin-viewer-9x:not(.legacy) .player > .right-leg .front {
  517. background-position: -180px -468px;
  518. }
  519. .mc-skin-viewer-9x:not(.legacy) .player > .right-leg .back {
  520. background-position: -252px -468px;
  521. }
  522. .mc-skin-viewer-9x:not(.legacy) .player > .right-leg .right {
  523. background-position: -144px -468px;
  524. }
  525. .mc-skin-viewer-9x:not(.legacy) .player > .right-leg .left {
  526. background-position: -216px -468px;
  527. }
  528. .mc-skin-viewer-9x:not(.legacy) .player > .right-leg .top {
  529. background-position: -180px -432px;
  530. }
  531. .mc-skin-viewer-9x:not(.legacy) .player > .right-leg .bottom {
  532. background-position: -216px -432px;
  533. }
  534. .mc-skin-viewer-9x:not(.legacy) .player > .right-leg > .accessory .front {
  535. background-position: -36px -468px;
  536. }
  537. .mc-skin-viewer-9x:not(.legacy) .player > .right-leg > .accessory .back {
  538. background-position: -108px -468px;
  539. }
  540. .mc-skin-viewer-9x:not(.legacy) .player > .right-leg > .accessory .right {
  541. background-position: 0px -468px;
  542. }
  543. .mc-skin-viewer-9x:not(.legacy) .player > .right-leg > .accessory .left {
  544. background-position: -72px -468px;
  545. }
  546. .mc-skin-viewer-9x:not(.legacy) .player > .right-leg > .accessory .top {
  547. background-position: -36px -432px;
  548. }
  549. .mc-skin-viewer-9x:not(.legacy) .player > .right-leg > .accessory .bottom {
  550. background-position: -72px -432px;
  551. }
  552. .mc-skin-viewer-9x.slim .player > .left-arm .front,
  553. .mc-skin-viewer-9x.slim .player > .right-arm .front,
  554. .mc-skin-viewer-9x.slim .player > .left-arm .back,
  555. .mc-skin-viewer-9x.slim .player > .right-arm .back,
  556. .mc-skin-viewer-9x.slim .player > .left-arm .top,
  557. .mc-skin-viewer-9x.slim .player > .right-arm .top,
  558. .mc-skin-viewer-9x.slim .player > .left-arm .bottom,
  559. .mc-skin-viewer-9x.slim .player > .right-arm .bottom {
  560. width: 27px;
  561. }
  562. .mc-skin-viewer-9x.slim .player > .left-arm .front {
  563. transform: rotateX(0deg) rotateY(0deg) translateX(9px) translateY(0px) translateZ(18px);
  564. }
  565. .mc-skin-viewer-9x.slim .player > .left-arm .back {
  566. background-position: -459px -180px;
  567. transform: rotateX(0deg) rotateY(180deg) translateX(-9px) translateY(0px) translateZ(18px);
  568. }
  569. .mc-skin-viewer-9x.slim .player > .left-arm .right {
  570. transform: rotateX(0deg) rotateY(270deg) translateX(0px) translateY(0px) translateZ(9px);
  571. }
  572. .mc-skin-viewer-9x.slim .player > .left-arm .left {
  573. background-position: -423px -180px;
  574. }
  575. .mc-skin-viewer-9x.slim .player > .left-arm .top {
  576. transform: rotateX(90deg) rotateY(0deg) translateX(9px) translateY(0px) translateZ(18px);
  577. }
  578. .mc-skin-viewer-9x.slim .player > .left-arm .bottom {
  579. background-position: -423px -144px;
  580. transform: rotateX(270deg) rotateY(0deg) translateX(9px) translateY(0px) translateZ(90px);
  581. }
  582. .mc-skin-viewer-9x.slim .player > .left-arm > .accessory .back {
  583. background-position: -459px -324px;
  584. }
  585. .mc-skin-viewer-9x.slim .player > .left-arm > .accessory .left {
  586. background-position: -423px -324px;
  587. }
  588. .mc-skin-viewer-9x.slim .player > .left-arm > .accessory .bottom {
  589. background-position: -423px -288px;
  590. }
  591. .mc-skin-viewer-9x.slim .player > .right-arm .back {
  592. background-position: -387px -468px;
  593. }
  594. .mc-skin-viewer-9x.slim .player > .right-arm .left {
  595. background-position: -351px -468px;
  596. transform: rotateX(0deg) rotateY(90deg) translateX(0px) translateY(0px) translateZ(9px);
  597. }
  598. .mc-skin-viewer-9x.slim .player > .right-arm .bottom {
  599. background-position: -351px -432px;
  600. }
  601. .mc-skin-viewer-9x.slim .player > .right-arm > .accessory .back {
  602. background-position: -531px -468px;
  603. }
  604. .mc-skin-viewer-9x.slim .player > .right-arm > .accessory .left {
  605. background-position: -495px -468px;
  606. }
  607. .mc-skin-viewer-9x.slim .player > .right-arm > .accessory .bottom {
  608. background-position: -495px -432px;
  609. }
  610. .mc-skin-viewer-9x.slim.legacy .player > .right-arm {
  611. transform: translateY(72px) translateX(63px) scaleX(-1);
  612. }
  613. .mc-skin-viewer-9x.slim.legacy .player > .right-arm .back {
  614. background-position: -459px -180px;
  615. }
  616. .mc-skin-viewer-9x.slim.legacy .player > .right-arm > .accessory .back {
  617. background-position: -459px -324px;
  618. }
  619. .mc-skin-viewer-9x .player .cape {
  620. transform-style: preserve-3d;
  621. transform: rotateY(180deg) translateX(-9px) translateZ(22.5px) translateY(67.5px) rotateX(5deg);
  622. }
  623. .mc-skin-viewer-9x .player .cape > .front,
  624. .mc-skin-viewer-9x .player .cape > .back,
  625. .mc-skin-viewer-9x .player .cape > .left,
  626. .mc-skin-viewer-9x .player .cape > .right,
  627. .mc-skin-viewer-9x .player .cape > .top,
  628. .mc-skin-viewer-9x .player .cape > .bottom {
  629. position: absolute;
  630. background-image: inherit!important;
  631. background-size: 576px 288px;
  632. backface-visibility: hidden;
  633. }
  634. .mc-skin-viewer-9x .player .cape > .front,
  635. .mc-skin-viewer-9x .player .cape > .back {
  636. width: 90px;
  637. height: 135px;
  638. }
  639. .mc-skin-viewer-9x .player .cape > .left,
  640. .mc-skin-viewer-9x .player .cape > .right {
  641. width: 9px;
  642. height: 135px;
  643. }
  644. .mc-skin-viewer-9x .player .cape > .top,
  645. .mc-skin-viewer-9x .player .cape > .bottom {
  646. width: 90px;
  647. height: 9px;
  648. }
  649. .mc-skin-viewer-9x .player .cape > .front {
  650. background-position: -9px -9px;
  651. transform: translateZ(4.5px);
  652. }
  653. .mc-skin-viewer-9x .player .cape > .back {
  654. background-position: -108px -9px;
  655. transform: translateZ(-4.5px) rotateY(180deg);
  656. }
  657. .mc-skin-viewer-9x .player .cape > .left {
  658. background-position: 0px -9px;
  659. transform: rotateY(270deg) translateZ(4.5px);
  660. }
  661. .mc-skin-viewer-9x .player .cape > .right {
  662. background-position: -99px -9px;
  663. transform: rotateY(-270deg) translateZ(85.5px);
  664. }
  665. .mc-skin-viewer-9x .player .cape > .top {
  666. background-position: -9px 0px;
  667. transform: rotateX(90deg) rotateY(0deg) translateX(0px) translateY(0px) translateZ(4.5px);
  668. }
  669. .mc-skin-viewer-9x .player .cape > .bottom {
  670. background-position: -99px 0px;
  671. transform: rotateX(-90deg) translateZ(130.5px);
  672. }
  673. .mc-skin-viewer-9x.legacy-cape > .player .cape > .front,
  674. .mc-skin-viewer-9x.legacy-cape > .player .cape > .back,
  675. .mc-skin-viewer-9x.legacy-cape > .player .cape > .left,
  676. .mc-skin-viewer-9x.legacy-cape > .player .cape > .right,
  677. .mc-skin-viewer-9x.legacy-cape > .player .cape > .top,
  678. .mc-skin-viewer-9x.legacy-cape > .player .cape > .bottom {
  679. background-size: 198px 153px;
  680. }
  681. .mc-skin-viewer-11x {
  682. width: 88px;
  683. height: 352px;
  684. margin: 15px auto 40px auto;
  685. perspective: 800px;
  686. perspective-origin: 50% 100px;
  687. transform-style: preserve-3d;
  688. background-image: none !important;
  689. image-rendering: optimizeSpeed;
  690. /* Legal fallback */
  691. image-rendering: -moz-crisp-edges;
  692. /* Firefox */
  693. image-rendering: -o-crisp-edges;
  694. /* Opera */
  695. image-rendering: -webkit-optimize-contrast;
  696. /* Safari */
  697. image-rendering: optimize-contrast;
  698. /* CSS3 Proposed */
  699. image-rendering: crisp-edges;
  700. /* CSS4 Proposed */
  701. image-rendering: pixelated;
  702. /* CSS4 Proposed */
  703. -ms-interpolation-mode: nearest-neighbor;
  704. /* IE8+ */
  705. }
  706. .mc-skin-viewer-11x.hide-accessories .accessory {
  707. display: none;
  708. }
  709. .mc-skin-viewer-11x.spin > .player {
  710. animation: spin 12s infinite linear;
  711. }
  712. .mc-skin-viewer-11x .player {
  713. transform-style: preserve-3d;
  714. }
  715. .mc-skin-viewer-11x .player .front,
  716. .mc-skin-viewer-11x .player .back,
  717. .mc-skin-viewer-11x .player .left,
  718. .mc-skin-viewer-11x .player .right,
  719. .mc-skin-viewer-11x .player .top,
  720. .mc-skin-viewer-11x .player .bottom {
  721. position: absolute;
  722. background-size: 704px;
  723. background-repeat: no-repeat;
  724. backface-visibility: hidden;
  725. }
  726. .mc-skin-viewer-11x .player .accessory {
  727. background-image: none;
  728. }
  729. .mc-skin-viewer-11x .player .accessory .front,
  730. .mc-skin-viewer-11x .player .accessory .back,
  731. .mc-skin-viewer-11x .player .accessory .left,
  732. .mc-skin-viewer-11x .player .accessory .right,
  733. .mc-skin-viewer-11x .player .accessory .top,
  734. .mc-skin-viewer-11x .player .accessory .bottom {
  735. backface-visibility: visible;
  736. }
  737. .mc-skin-viewer-11x .player > .head {
  738. position: absolute;
  739. transform-style: preserve-3d;
  740. width: 88px;
  741. height: 88px;
  742. margin: 0 auto;
  743. background-image: none !important;
  744. }
  745. .mc-skin-viewer-11x .player > .head .front,
  746. .mc-skin-viewer-11x .player > .head .back,
  747. .mc-skin-viewer-11x .player > .head .left,
  748. .mc-skin-viewer-11x .player > .head .right,
  749. .mc-skin-viewer-11x .player > .head .top,
  750. .mc-skin-viewer-11x .player > .head .bottom {
  751. width: 88px;
  752. height: 88px;
  753. }
  754. .mc-skin-viewer-11x .player > .head .front {
  755. background-position: -88px -88px;
  756. transform: rotateX(0deg) rotateY(0deg) translateX(0px) translateY(0px) translateZ(44px);
  757. }
  758. .mc-skin-viewer-11x .player > .head .back {
  759. background-position: -264px -88px;
  760. transform: rotateX(0deg) rotateY(180deg) translateX(0px) translateY(0px) translateZ(44px);
  761. }
  762. .mc-skin-viewer-11x .player > .head .right {
  763. background-position: 0px -88px;
  764. transform: rotateX(0deg) rotateY(270deg) translateX(0px) translateY(0px) translateZ(44px);
  765. }
  766. .mc-skin-viewer-11x .player > .head .left {
  767. background-position: -176px -88px;
  768. transform: rotateX(0deg) rotateY(90deg) translateX(0px) translateY(0px) translateZ(44px);
  769. }
  770. .mc-skin-viewer-11x .player > .head .top {
  771. background-position: -88px 0px;
  772. transform: rotateX(90deg) rotateY(0deg) translateX(0px) translateY(0px) translateZ(44px);
  773. }
  774. .mc-skin-viewer-11x .player > .head .bottom {
  775. background-position: -176px 0px;
  776. transform: rotateX(270deg) rotateY(0deg) rotateZ(180deg) translateX(0px) translateY(0px) translateZ(44px);
  777. }
  778. .mc-skin-viewer-11x .player > .head > .accessory {
  779. transform-style: preserve-3d;
  780. transform: scale3d(1.125, 1.125, 1.125) translateY(-4.5px);
  781. }
  782. .mc-skin-viewer-11x .player > .head > .accessory > .front {
  783. background-position: -440px -88px;
  784. }
  785. .mc-skin-viewer-11x .player > .head > .accessory > .back {
  786. background-position: -616px -88px;
  787. }
  788. .mc-skin-viewer-11x .player > .head > .accessory > .right {
  789. background-position: -352px -88px;
  790. }
  791. .mc-skin-viewer-11x .player > .head > .accessory > .left {
  792. background-position: -528px -88px;
  793. }
  794. .mc-skin-viewer-11x .player > .head > .accessory > .top {
  795. background-position: -440px 0px;
  796. }
  797. .mc-skin-viewer-11x .player > .head > .accessory > .bottom {
  798. background-position: -528px 0px;
  799. }
  800. .mc-skin-viewer-11x .player > .body {
  801. position: absolute;
  802. transform-style: preserve-3d;
  803. width: 88px;
  804. height: 88px;
  805. margin: 0 auto;
  806. transform: translateY(88px);
  807. background-image: none !important;
  808. }
  809. .mc-skin-viewer-11x .player > .body .front,
  810. .mc-skin-viewer-11x .player > .body .back,
  811. .mc-skin-viewer-11x .player > .body .left,
  812. .mc-skin-viewer-11x .player > .body .right,
  813. .mc-skin-viewer-11x .player > .body .top,
  814. .mc-skin-viewer-11x .player > .body .bottom {
  815. width: 88px;
  816. height: 132px;
  817. }
  818. .mc-skin-viewer-11x .player > .body .left,
  819. .mc-skin-viewer-11x .player > .body .right {
  820. width: 44px;
  821. }
  822. .mc-skin-viewer-11x .player > .body .top,
  823. .mc-skin-viewer-11x .player > .body .bottom {
  824. height: 44px;
  825. }
  826. .mc-skin-viewer-11x .player > .body .front {
  827. background-position: -220px -220px;
  828. transform: rotateX(0deg) rotateY(0deg) translateX(0px) translateY(0px) translateZ(22px);
  829. }
  830. .mc-skin-viewer-11x .player > .body .back {
  831. background-position: -352px -220px;
  832. transform: rotateX(0deg) rotateY(180deg) translateX(0px) translateY(0px) translateZ(22px);
  833. }
  834. .mc-skin-viewer-11x .player > .body .right {
  835. background-position: -176px -220px;
  836. transform: rotateX(0deg) rotateY(270deg) translateX(0px) translateY(0px) translateZ(22px);
  837. }
  838. .mc-skin-viewer-11x .player > .body .left {
  839. background-position: -308px -220px;
  840. transform: rotateX(0deg) rotateY(90deg) translateX(0px) translateY(0px) translateZ(66px);
  841. }
  842. .mc-skin-viewer-11x .player > .body .top {
  843. background-position: -220px -176px;
  844. transform: rotateX(90deg) rotateY(0deg) translateX(0px) translateY(0px) translateZ(22px);
  845. }
  846. .mc-skin-viewer-11x .player > .body .bottom {
  847. background-position: -308px -176px;
  848. transform: rotateX(270deg) rotateY(0deg) translateX(0px) translateY(0px) translateZ(110px);
  849. }
  850. .mc-skin-viewer-11x .player > .body > .accessory {
  851. transform-style: preserve-3d;
  852. transform: scale3d(1.0625, 1.0625, 1.0625) translateY(-4.125px);
  853. }
  854. .mc-skin-viewer-11x .player > .body > .accessory > .front {
  855. background-position: -220px -396px;
  856. }
  857. .mc-skin-viewer-11x .player > .body > .accessory > .back {
  858. background-position: -352px -396px;
  859. }
  860. .mc-skin-viewer-11x .player > .body > .accessory > .right {
  861. background-position: -176px -396px;
  862. }
  863. .mc-skin-viewer-11x .player > .body > .accessory > .left {
  864. background-position: -308px -396px;
  865. }
  866. .mc-skin-viewer-11x .player > .body > .accessory > .top {
  867. background-position: -220px -352px;
  868. }
  869. .mc-skin-viewer-11x .player > .body > .accessory > .bottom {
  870. background-position: -308px -352px;
  871. }
  872. .mc-skin-viewer-11x .player > .left-arm,
  873. .mc-skin-viewer-11x .player > .right-arm {
  874. position: absolute;
  875. transform-style: preserve-3d;
  876. width: 44px;
  877. height: 132px;
  878. margin: 0 auto;
  879. transform: translateY(88px) translateX(-44px);
  880. background-image: none !important;
  881. }
  882. .mc-skin-viewer-11x .player > .left-arm .front,
  883. .mc-skin-viewer-11x .player > .right-arm .front,
  884. .mc-skin-viewer-11x .player > .left-arm .back,
  885. .mc-skin-viewer-11x .player > .right-arm .back,
  886. .mc-skin-viewer-11x .player > .left-arm .left,
  887. .mc-skin-viewer-11x .player > .right-arm .left,
  888. .mc-skin-viewer-11x .player > .left-arm .right,
  889. .mc-skin-viewer-11x .player > .right-arm .right,
  890. .mc-skin-viewer-11x .player > .left-arm .top,
  891. .mc-skin-viewer-11x .player > .right-arm .top,
  892. .mc-skin-viewer-11x .player > .left-arm .bottom,
  893. .mc-skin-viewer-11x .player > .right-arm .bottom {
  894. width: 44px;
  895. height: 132px;
  896. }
  897. .mc-skin-viewer-11x .player > .left-arm .top,
  898. .mc-skin-viewer-11x .player > .right-arm .top,
  899. .mc-skin-viewer-11x .player > .left-arm .bottom,
  900. .mc-skin-viewer-11x .player > .right-arm .bottom {
  901. height: 44px;
  902. }
  903. .mc-skin-viewer-11x .player > .left-arm .front,
  904. .mc-skin-viewer-11x .player > .right-arm .front {
  905. background-position: -484px -220px;
  906. transform: rotateX(0deg) rotateY(0deg) translateX(0px) translateY(0px) translateZ(22px);
  907. }
  908. .mc-skin-viewer-11x .player > .left-arm .back,
  909. .mc-skin-viewer-11x .player > .right-arm .back {
  910. background-position: -572px -220px;
  911. transform: rotateX(0deg) rotateY(180deg) translateX(0px) translateY(0px) translateZ(22px);
  912. }
  913. .mc-skin-viewer-11x .player > .left-arm .right,
  914. .mc-skin-viewer-11x .player > .right-arm .right {
  915. background-position: -440px -220px;
  916. transform: rotateX(0deg) rotateY(270deg) translateX(0px) translateY(0px) translateZ(22px);
  917. }
  918. .mc-skin-viewer-11x .player > .left-arm .left,
  919. .mc-skin-viewer-11x .player > .right-arm .left {
  920. background-position: -528px -220px;
  921. transform: rotateX(0deg) rotateY(90deg) translateX(0px) translateY(0px) translateZ(22px);
  922. }
  923. .mc-skin-viewer-11x .player > .left-arm .top,
  924. .mc-skin-viewer-11x .player > .right-arm .top {
  925. background-position: -484px -176px;
  926. transform: rotateX(90deg) rotateY(0deg) translateX(0px) translateY(0px) translateZ(22px);
  927. }
  928. .mc-skin-viewer-11x .player > .left-arm .bottom,
  929. .mc-skin-viewer-11x .player > .right-arm .bottom {
  930. background-position: -528px -176px;
  931. transform: rotateX(270deg) rotateY(0deg) translateX(0px) translateY(0px) translateZ(110px);
  932. }
  933. .mc-skin-viewer-11x .player > .left-arm > .accessory,
  934. .mc-skin-viewer-11x .player > .right-arm > .accessory {
  935. transform-style: preserve-3d;
  936. transform: scale3d(1.0625, 1.0625, 1.0625) translateY(-4.125px);
  937. }
  938. .mc-skin-viewer-11x .player > .left-arm > .accessory .front,
  939. .mc-skin-viewer-11x .player > .right-arm > .accessory .front {
  940. background-position: -484px -396px;
  941. }
  942. .mc-skin-viewer-11x .player > .left-arm > .accessory .back,
  943. .mc-skin-viewer-11x .player > .right-arm > .accessory .back {
  944. background-position: -572px -396px;
  945. }
  946. .mc-skin-viewer-11x .player > .left-arm > .accessory .right,
  947. .mc-skin-viewer-11x .player > .right-arm > .accessory .right {
  948. background-position: -440px -396px;
  949. }
  950. .mc-skin-viewer-11x .player > .left-arm > .accessory .left,
  951. .mc-skin-viewer-11x .player > .right-arm > .accessory .left {
  952. background-position: -528px -396px;
  953. }
  954. .mc-skin-viewer-11x .player > .left-arm > .accessory .top,
  955. .mc-skin-viewer-11x .player > .right-arm > .accessory .top {
  956. background-position: -484px -352px;
  957. }
  958. .mc-skin-viewer-11x .player > .left-arm > .accessory .bottom,
  959. .mc-skin-viewer-11x .player > .right-arm > .accessory .bottom {
  960. background-position: -528px -352px;
  961. }
  962. .mc-skin-viewer-11x .player > .right-arm {
  963. transform: translateY(88px) translateX(88px) scaleX(-1);
  964. }
  965. .mc-skin-viewer-11x .player > .left-leg,
  966. .mc-skin-viewer-11x .player > .right-leg {
  967. position: absolute;
  968. transform-style: preserve-3d;
  969. width: 44px;
  970. height: 132px;
  971. margin: 0 auto;
  972. transform: translateY(220px);
  973. background-image: none !important;
  974. }
  975. .mc-skin-viewer-11x .player > .left-leg .front,
  976. .mc-skin-viewer-11x .player > .right-leg .front,
  977. .mc-skin-viewer-11x .player > .left-leg .back,
  978. .mc-skin-viewer-11x .player > .right-leg .back,
  979. .mc-skin-viewer-11x .player > .left-leg .left,
  980. .mc-skin-viewer-11x .player > .right-leg .left,
  981. .mc-skin-viewer-11x .player > .left-leg .right,
  982. .mc-skin-viewer-11x .player > .right-leg .right,
  983. .mc-skin-viewer-11x .player > .left-leg .top,
  984. .mc-skin-viewer-11x .player > .right-leg .top,
  985. .mc-skin-viewer-11x .player > .left-leg .bottom,
  986. .mc-skin-viewer-11x .player > .right-leg .bottom {
  987. width: 44px;
  988. height: 132px;
  989. }
  990. .mc-skin-viewer-11x .player > .left-leg .top,
  991. .mc-skin-viewer-11x .player > .right-leg .top,
  992. .mc-skin-viewer-11x .player > .left-leg .bottom,
  993. .mc-skin-viewer-11x .player > .right-leg .bottom {
  994. height: 44px;
  995. }
  996. .mc-skin-viewer-11x .player > .left-leg .front,
  997. .mc-skin-viewer-11x .player > .right-leg .front {
  998. background-position: -44px -220px;
  999. transform: rotateX(0deg) rotateY(0deg) translateX(0px) translateY(0px) translateZ(22px);
  1000. }
  1001. .mc-skin-viewer-11x .player > .left-leg .back,
  1002. .mc-skin-viewer-11x .player > .right-leg .back {
  1003. background-position: -132px -220px;
  1004. transform: rotateX(0deg) rotateY(180deg) translateX(0px) translateY(0px) translateZ(22px);
  1005. }
  1006. .mc-skin-viewer-11x .player > .left-leg .right,
  1007. .mc-skin-viewer-11x .player > .right-leg .right {
  1008. background-position: 0px -220px;
  1009. transform: rotateX(0deg) rotateY(270deg) translateX(0px) translateY(0px) translateZ(22px);
  1010. }
  1011. .mc-skin-viewer-11x .player > .left-leg .left,
  1012. .mc-skin-viewer-11x .player > .right-leg .left {
  1013. background-position: -88px -220px;
  1014. transform: rotateX(0deg) rotateY(90deg) translateX(0px) translateY(0px) translateZ(22px);
  1015. }
  1016. .mc-skin-viewer-11x .player > .left-leg .top,
  1017. .mc-skin-viewer-11x .player > .right-leg .top {
  1018. background-position: -44px -176px;
  1019. transform: rotateX(90deg) rotateY(0deg) translateX(0px) translateY(0px) translateZ(22px);
  1020. }
  1021. .mc-skin-viewer-11x .player > .left-leg .bottom,
  1022. .mc-skin-viewer-11x .player > .right-leg .bottom {
  1023. background-position: -88px -176px;
  1024. transform: rotateX(270deg) rotateY(0deg) translateX(0px) translateY(0px) translateZ(110px);
  1025. }
  1026. .mc-skin-viewer-11x .player > .left-leg > .accessory,
  1027. .mc-skin-viewer-11x .player > .right-leg > .accessory {
  1028. transform-style: preserve-3d;
  1029. transform: scale3d(1.03125, 1.03125, 1.03125) translateY(-2.0625px);
  1030. }
  1031. .mc-skin-viewer-11x .player > .left-leg > .accessory .front,
  1032. .mc-skin-viewer-11x .player > .right-leg > .accessory .front {
  1033. background-position: -44px -396px;
  1034. }
  1035. .mc-skin-viewer-11x .player > .left-leg > .accessory .back,
  1036. .mc-skin-viewer-11x .player > .right-leg > .accessory .back {
  1037. background-position: -132px -396px;
  1038. }
  1039. .mc-skin-viewer-11x .player > .left-leg > .accessory .right,
  1040. .mc-skin-viewer-11x .player > .right-leg > .accessory .right {
  1041. background-position: 0px -396px;
  1042. }
  1043. .mc-skin-viewer-11x .player > .left-leg > .accessory .left,
  1044. .mc-skin-viewer-11x .player > .right-leg > .accessory .left {
  1045. background-position: -88px -396px;
  1046. }
  1047. .mc-skin-viewer-11x .player > .left-leg > .accessory .top,
  1048. .mc-skin-viewer-11x .player > .right-leg > .accessory .top {
  1049. background-position: -44px -352px;
  1050. }
  1051. .mc-skin-viewer-11x .player > .left-leg > .accessory .bottom,
  1052. .mc-skin-viewer-11x .player > .right-leg > .accessory .bottom {
  1053. background-position: -88px -352px;
  1054. }
  1055. .mc-skin-viewer-11x .player > .right-leg {
  1056. transform: translateY(220px) translateX(44px) scaleX(-1);
  1057. }
  1058. .mc-skin-viewer-11x:not(.legacy) .player > .right-arm {
  1059. transform: translateY(88px) translateX(88px);
  1060. }
  1061. .mc-skin-viewer-11x:not(.legacy) .player > .right-arm .front {
  1062. background-position: -396px -572px;
  1063. }
  1064. .mc-skin-viewer-11x:not(.legacy) .player > .right-arm .back {
  1065. background-position: -484px -572px;
  1066. }
  1067. .mc-skin-viewer-11x:not(.legacy) .player > .right-arm .right {
  1068. background-position: -352px -572px;
  1069. }
  1070. .mc-skin-viewer-11x:not(.legacy) .player > .right-arm .left {
  1071. background-position: -440px -572px;
  1072. }
  1073. .mc-skin-viewer-11x:not(.legacy) .player > .right-arm .top {
  1074. background-position: -396px -528px;
  1075. }
  1076. .mc-skin-viewer-11x:not(.legacy) .player > .right-arm .bottom {
  1077. background-position: -440px -528px;
  1078. }
  1079. .mc-skin-viewer-11x:not(.legacy) .player > .right-arm > .accessory .front {
  1080. background-position: -572px -572px;
  1081. }
  1082. .mc-skin-viewer-11x:not(.legacy) .player > .right-arm > .accessory .back {
  1083. background-position: -660px -572px;
  1084. }
  1085. .mc-skin-viewer-11x:not(.legacy) .player > .right-arm > .accessory .right {
  1086. background-position: -528px -572px;
  1087. }
  1088. .mc-skin-viewer-11x:not(.legacy) .player > .right-arm > .accessory .left {
  1089. background-position: -616px -572px;
  1090. }
  1091. .mc-skin-viewer-11x:not(.legacy) .player > .right-arm > .accessory .top {
  1092. background-position: -572px -528px;
  1093. }
  1094. .mc-skin-viewer-11x:not(.legacy) .player > .right-arm > .accessory .bottom {
  1095. background-position: -616px -528px;
  1096. }
  1097. .mc-skin-viewer-11x:not(.legacy) .player > .right-leg {
  1098. transform: translateY(220px) translateX(44px);
  1099. }
  1100. .mc-skin-viewer-11x:not(.legacy) .player > .right-leg .front {
  1101. background-position: -220px -572px;
  1102. }
  1103. .mc-skin-viewer-11x:not(.legacy) .player > .right-leg .back {
  1104. background-position: -308px -572px;
  1105. }
  1106. .mc-skin-viewer-11x:not(.legacy) .player > .right-leg .right {
  1107. background-position: -176px -572px;
  1108. }
  1109. .mc-skin-viewer-11x:not(.legacy) .player > .right-leg .left {
  1110. background-position: -264px -572px;
  1111. }
  1112. .mc-skin-viewer-11x:not(.legacy) .player > .right-leg .top {
  1113. background-position: -220px -528px;
  1114. }
  1115. .mc-skin-viewer-11x:not(.legacy) .player > .right-leg .bottom {
  1116. background-position: -264px -528px;
  1117. }
  1118. .mc-skin-viewer-11x:not(.legacy) .player > .right-leg > .accessory .front {
  1119. background-position: -44px -572px;
  1120. }
  1121. .mc-skin-viewer-11x:not(.legacy) .player > .right-leg > .accessory .back {
  1122. background-position: -132px -572px;
  1123. }
  1124. .mc-skin-viewer-11x:not(.legacy) .player > .right-leg > .accessory .right {
  1125. background-position: 0px -572px;
  1126. }
  1127. .mc-skin-viewer-11x:not(.legacy) .player > .right-leg > .accessory .left {
  1128. background-position: -88px -572px;
  1129. }
  1130. .mc-skin-viewer-11x:not(.legacy) .player > .right-leg > .accessory .top {
  1131. background-position: -44px -528px;
  1132. }
  1133. .mc-skin-viewer-11x:not(.legacy) .player > .right-leg > .accessory .bottom {
  1134. background-position: -88px -528px;
  1135. }
  1136. .mc-skin-viewer-11x.slim .player > .left-arm .front,
  1137. .mc-skin-viewer-11x.slim .player > .right-arm .front,
  1138. .mc-skin-viewer-11x.slim .player > .left-arm .back,
  1139. .mc-skin-viewer-11x.slim .player > .right-arm .back,
  1140. .mc-skin-viewer-11x.slim .player > .left-arm .top,
  1141. .mc-skin-viewer-11x.slim .player > .right-arm .top,
  1142. .mc-skin-viewer-11x.slim .player > .left-arm .bottom,
  1143. .mc-skin-viewer-11x.slim .player > .right-arm .bottom {
  1144. width: 33px;
  1145. }
  1146. .mc-skin-viewer-11x.slim .player > .left-arm .front {
  1147. transform: rotateX(0deg) rotateY(0deg) translateX(11px) translateY(0px) translateZ(22px);
  1148. }
  1149. .mc-skin-viewer-11x.slim .player > .left-arm .back {
  1150. background-position: -561px -220px;
  1151. transform: rotateX(0deg) rotateY(180deg) translateX(-11px) translateY(0px) translateZ(22px);
  1152. }
  1153. .mc-skin-viewer-11x.slim .player > .left-arm .right {
  1154. transform: rotateX(0deg) rotateY(270deg) translateX(0px) translateY(0px) translateZ(11px);
  1155. }
  1156. .mc-skin-viewer-11x.slim .player > .left-arm .left {
  1157. background-position: -517px -220px;
  1158. }
  1159. .mc-skin-viewer-11x.slim .player > .left-arm .top {
  1160. transform: rotateX(90deg) rotateY(0deg) translateX(11px) translateY(0px) translateZ(22px);
  1161. }
  1162. .mc-skin-viewer-11x.slim .player > .left-arm .bottom {
  1163. background-position: -517px -176px;
  1164. transform: rotateX(270deg) rotateY(0deg) translateX(11px) translateY(0px) translateZ(110px);
  1165. }
  1166. .mc-skin-viewer-11x.slim .player > .left-arm > .accessory .back {
  1167. background-position: -561px -396px;
  1168. }
  1169. .mc-skin-viewer-11x.slim .player > .left-arm > .accessory .left {
  1170. background-position: -517px -396px;
  1171. }
  1172. .mc-skin-viewer-11x.slim .player > .left-arm > .accessory .bottom {
  1173. background-position: -517px -352px;
  1174. }
  1175. .mc-skin-viewer-11x.slim .player > .right-arm .back {
  1176. background-position: -473px -572px;
  1177. }
  1178. .mc-skin-viewer-11x.slim .player > .right-arm .left {
  1179. background-position: -429px -572px;
  1180. transform: rotateX(0deg) rotateY(90deg) translateX(0px) translateY(0px) translateZ(11px);
  1181. }
  1182. .mc-skin-viewer-11x.slim .player > .right-arm .bottom {
  1183. background-position: -429px -528px;
  1184. }
  1185. .mc-skin-viewer-11x.slim .player > .right-arm > .accessory .back {
  1186. background-position: -649px -572px;
  1187. }
  1188. .mc-skin-viewer-11x.slim .player > .right-arm > .accessory .left {
  1189. background-position: -605px -572px;
  1190. }
  1191. .mc-skin-viewer-11x.slim .player > .right-arm > .accessory .bottom {
  1192. background-position: -605px -528px;
  1193. }
  1194. .mc-skin-viewer-11x.slim.legacy .player > .right-arm {
  1195. transform: translateY(88px) translateX(77px) scaleX(-1);
  1196. }
  1197. .mc-skin-viewer-11x.slim.legacy .player > .right-arm .back {
  1198. background-position: -561px -220px;
  1199. }
  1200. .mc-skin-viewer-11x.slim.legacy .player > .right-arm > .accessory .back {
  1201. background-position: -561px -396px;
  1202. }
  1203. .mc-skin-viewer-11x .player .cape {
  1204. transform-style: preserve-3d;
  1205. transform: rotateY(180deg) translateX(-11px) translateZ(27.5px) translateY(82.5px) rotateX(5deg);
  1206. }
  1207. .mc-skin-viewer-11x .player .cape > .front,
  1208. .mc-skin-viewer-11x .player .cape > .back,
  1209. .mc-skin-viewer-11x .player .cape > .left,
  1210. .mc-skin-viewer-11x .player .cape > .right,
  1211. .mc-skin-viewer-11x .player .cape > .top,
  1212. .mc-skin-viewer-11x .player .cape > .bottom {
  1213. position: absolute;
  1214. background-image: inherit!important;
  1215. background-size: 704px 352px;
  1216. backface-visibility: hidden;
  1217. }
  1218. .mc-skin-viewer-11x .player .cape > .front,
  1219. .mc-skin-viewer-11x .player .cape > .back {
  1220. width: 110px;
  1221. height: 165px;
  1222. }
  1223. .mc-skin-viewer-11x .player .cape > .left,
  1224. .mc-skin-viewer-11x .player .cape > .right {
  1225. width: 11px;
  1226. height: 165px;
  1227. }
  1228. .mc-skin-viewer-11x .player .cape > .top,
  1229. .mc-skin-viewer-11x .player .cape > .bottom {
  1230. width: 110px;
  1231. height: 11px;
  1232. }
  1233. .mc-skin-viewer-11x .player .cape > .front {
  1234. background-position: -11px -11px;
  1235. transform: translateZ(5.5px);
  1236. }
  1237. .mc-skin-viewer-11x .player .cape > .back {
  1238. background-position: -132px -11px;
  1239. transform: translateZ(-5.5px) rotateY(180deg);
  1240. }
  1241. .mc-skin-viewer-11x .player .cape > .left {
  1242. background-position: 0px -11px;
  1243. transform: rotateY(270deg) translateZ(5.5px);
  1244. }
  1245. .mc-skin-viewer-11x .player .cape > .right {
  1246. background-position: -121px -11px;
  1247. transform: rotateY(-270deg) translateZ(104.5px);
  1248. }
  1249. .mc-skin-viewer-11x .player .cape > .top {
  1250. background-position: -11px 0px;
  1251. transform: rotateX(90deg) rotateY(0deg) translateX(0px) translateY(0px) translateZ(5.5px);
  1252. }
  1253. .mc-skin-viewer-11x .player .cape > .bottom {
  1254. background-position: -121px 0px;
  1255. transform: rotateX(-90deg) translateZ(159.5px);
  1256. }
  1257. .mc-skin-viewer-11x.legacy-cape > .player .cape > .front,
  1258. .mc-skin-viewer-11x.legacy-cape > .player .cape > .back,
  1259. .mc-skin-viewer-11x.legacy-cape > .player .cape > .left,
  1260. .mc-skin-viewer-11x.legacy-cape > .player .cape > .right,
  1261. .mc-skin-viewer-11x.legacy-cape > .player .cape > .top,
  1262. .mc-skin-viewer-11x.legacy-cape > .player .cape > .bottom {
  1263. background-size: 242px 187px;
  1264. }
  1265. .mc-cape-viewer-9x {
  1266. width: 90px;
  1267. height: 135px;
  1268. margin: 10px auto;
  1269. perspective: 800px;
  1270. perspective-origin: 50% 100px;
  1271. background-image: none;
  1272. image-rendering: optimizeSpeed;
  1273. /* Legal fallback */
  1274. image-rendering: -moz-crisp-edges;
  1275. /* Firefox */
  1276. image-rendering: -o-crisp-edges;
  1277. /* Opera */
  1278. image-rendering: -webkit-optimize-contrast;
  1279. /* Safari */
  1280. image-rendering: optimize-contrast;
  1281. /* CSS3 Proposed */
  1282. image-rendering: crisp-edges;
  1283. /* CSS4 Proposed */
  1284. image-rendering: pixelated;
  1285. /* CSS4 Proposed */
  1286. -ms-interpolation-mode: nearest-neighbor;
  1287. /* IE8+ */
  1288. }
  1289. .mc-cape-viewer-9x .wrapper {
  1290. transform-style: preserve-3d;
  1291. width: 90px;
  1292. height: 135px;
  1293. position: relative;
  1294. background-image: none !important;
  1295. }
  1296. .mc-cape-viewer-9x .wrapper .cape {
  1297. transform-style: preserve-3d;
  1298. }
  1299. .mc-cape-viewer-9x .wrapper .cape > .front,
  1300. .mc-cape-viewer-9x .wrapper .cape > .back,
  1301. .mc-cape-viewer-9x .wrapper .cape > .left,
  1302. .mc-cape-viewer-9x .wrapper .cape > .right,
  1303. .mc-cape-viewer-9x .wrapper .cape > .top,
  1304. .mc-cape-viewer-9x .wrapper .cape > .bottom {
  1305. position: absolute;
  1306. background-size: 576px 288px;
  1307. backface-visibility: hidden;
  1308. }
  1309. .mc-cape-viewer-9x .wrapper .cape > .front,
  1310. .mc-cape-viewer-9x .wrapper .cape > .back {
  1311. width: 90px;
  1312. height: 135px;
  1313. }
  1314. .mc-cape-viewer-9x .wrapper .cape > .left,
  1315. .mc-cape-viewer-9x .wrapper .cape > .right {
  1316. width: 9px;
  1317. height: 135px;
  1318. }
  1319. .mc-cape-viewer-9x .wrapper .cape > .top,
  1320. .mc-cape-viewer-9x .wrapper .cape > .bottom {
  1321. width: 90px;
  1322. height: 9px;
  1323. }
  1324. .mc-cape-viewer-9x .wrapper .cape > .front {
  1325. background-position: -9px -9px;
  1326. transform: translateZ(4.5px);
  1327. }
  1328. .mc-cape-viewer-9x .wrapper .cape > .back {
  1329. background-position: -108px -9px;
  1330. transform: translateZ(-4.5px) rotateY(180deg);
  1331. }
  1332. .mc-cape-viewer-9x .wrapper .cape > .left {
  1333. background-position: 0px -9px;
  1334. transform: rotateY(270deg) translateZ(4.5px);
  1335. }
  1336. .mc-cape-viewer-9x .wrapper .cape > .right {
  1337. background-position: -99px -9px;
  1338. transform: rotateY(-270deg) translateZ(85.5px);
  1339. }
  1340. .mc-cape-viewer-9x .wrapper .cape > .top {
  1341. background-position: -9px 0px;
  1342. transform: rotateX(90deg) rotateY(0deg) translateX(0px) translateY(0px) translateZ(4.5px);
  1343. }
  1344. .mc-cape-viewer-9x .wrapper .cape > .bottom {
  1345. background-position: -99px 0px;
  1346. transform: rotateX(-90deg) translateZ(130.5px);
  1347. }
  1348. .mc-cape-viewer-9x.legacy .wrapper .cape > .front,
  1349. .mc-cape-viewer-9x.legacy .wrapper .cape > .back,
  1350. .mc-cape-viewer-9x.legacy .wrapper .cape > .left,
  1351. .mc-cape-viewer-9x.legacy .wrapper .cape > .right {
  1352. background-size: 198px 153px;
  1353. }
  1354. .mc-cape-viewer-9x.waving > .wrapper > .cape {
  1355. animation: waving 2s infinite ease-in-out;
  1356. }
  1357. .mc-cape-viewer-9x.spin > .wrapper > .cape {
  1358. animation: spin 12s infinite linear;
  1359. }