/*! * Copyright 2018 Robert Koszewski * * 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: * * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. * * 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. */ @keyframes spin { from { transform: rotateY(360deg); } to { transform: rotateY(0); } } @keyframes waving { 0% { transform: rotateX(-2deg); } 50% { transform: rotateX(2deg); } 100% { transform: rotateX(-2deg); } } .mc-face-viewer-4x { image-rendering: optimizeSpeed; /* Legal fallback */ image-rendering: -moz-crisp-edges; /* Firefox */ image-rendering: -o-crisp-edges; /* Opera */ image-rendering: -webkit-optimize-contrast; /* Safari */ image-rendering: optimize-contrast; /* CSS3 Proposed */ image-rendering: crisp-edges; /* CSS4 Proposed */ image-rendering: pixelated; /* CSS4 Proposed */ -ms-interpolation-mode: nearest-neighbor; /* IE8+ */ background-size: 256px; width: 32px; height: 32px; background-position: -32px -32px; overflow: hidden; display: inline-block; } .mc-face-viewer-4x::after { content: " "; width: 32px; height: 32px; background-size: 288px; background-image: inherit; background-position: -182px -38px; overflow: hidden; display: inline-block; } .mc-face-viewer-8x { image-rendering: optimizeSpeed; /* Legal fallback */ image-rendering: -moz-crisp-edges; /* Firefox */ image-rendering: -o-crisp-edges; /* Opera */ image-rendering: -webkit-optimize-contrast; /* Safari */ image-rendering: optimize-contrast; /* CSS3 Proposed */ image-rendering: crisp-edges; /* CSS4 Proposed */ image-rendering: pixelated; /* CSS4 Proposed */ -ms-interpolation-mode: nearest-neighbor; /* IE8+ */ background-size: 512px; width: 64px; height: 64px; background-position: -64px -64px; overflow: hidden; display: inline-block; } .mc-face-viewer-8x::after { content: " "; width: 64px; height: 64px; background-size: 576px; background-image: inherit; background-position: -364px -76px; overflow: hidden; display: inline-block; } .mc-skin-viewer-9x { width: 72px; height: 288px; margin: 15px auto 40px auto; perspective: 800px; perspective-origin: 50% 100px; transform-style: preserve-3d; background-image: none !important; image-rendering: optimizeSpeed; /* Legal fallback */ image-rendering: -moz-crisp-edges; /* Firefox */ image-rendering: -o-crisp-edges; /* Opera */ image-rendering: -webkit-optimize-contrast; /* Safari */ image-rendering: optimize-contrast; /* CSS3 Proposed */ image-rendering: crisp-edges; /* CSS4 Proposed */ image-rendering: pixelated; /* CSS4 Proposed */ -ms-interpolation-mode: nearest-neighbor; /* IE8+ */ } .mc-skin-viewer-9x.hide-accessories .accessory { display: none; } .mc-skin-viewer-9x.spin > .player { animation: spin 12s infinite linear; } .mc-skin-viewer-9x .player { transform-style: preserve-3d; } .mc-skin-viewer-9x .player .front, .mc-skin-viewer-9x .player .back, .mc-skin-viewer-9x .player .left, .mc-skin-viewer-9x .player .right, .mc-skin-viewer-9x .player .top, .mc-skin-viewer-9x .player .bottom { position: absolute; background-size: 576px; background-repeat: no-repeat; backface-visibility: hidden; } .mc-skin-viewer-9x .player .accessory { background-image: none; } .mc-skin-viewer-9x .player .accessory .front, .mc-skin-viewer-9x .player .accessory .back, .mc-skin-viewer-9x .player .accessory .left, .mc-skin-viewer-9x .player .accessory .right, .mc-skin-viewer-9x .player .accessory .top, .mc-skin-viewer-9x .player .accessory .bottom { backface-visibility: visible; } .mc-skin-viewer-9x .player > .head { position: absolute; transform-style: preserve-3d; width: 72px; height: 72px; margin: 0 auto; background-image: none !important; } .mc-skin-viewer-9x .player > .head .front, .mc-skin-viewer-9x .player > .head .back, .mc-skin-viewer-9x .player > .head .left, .mc-skin-viewer-9x .player > .head .right, .mc-skin-viewer-9x .player > .head .top, .mc-skin-viewer-9x .player > .head .bottom { width: 72px; height: 72px; } .mc-skin-viewer-9x .player > .head .front { background-position: -72px -72px; transform: rotateX(0deg) rotateY(0deg) translateX(0px) translateY(0px) translateZ(36px); } .mc-skin-viewer-9x .player > .head .back { background-position: -216px -72px; transform: rotateX(0deg) rotateY(180deg) translateX(0px) translateY(0px) translateZ(36px); } .mc-skin-viewer-9x .player > .head .right { background-position: 0px -72px; transform: rotateX(0deg) rotateY(270deg) translateX(0px) translateY(0px) translateZ(36px); } .mc-skin-viewer-9x .player > .head .left { background-position: -144px -72px; transform: rotateX(0deg) rotateY(90deg) translateX(0px) translateY(0px) translateZ(36px); } .mc-skin-viewer-9x .player > .head .top { background-position: -72px 0px; transform: rotateX(90deg) rotateY(0deg) translateX(0px) translateY(0px) translateZ(36px); } .mc-skin-viewer-9x .player > .head .bottom { background-position: -144px 0px; transform: rotateX(270deg) rotateY(0deg) rotateZ(180deg) translateX(0px) translateY(0px) translateZ(36px); } .mc-skin-viewer-9x .player > .head > .accessory { transform-style: preserve-3d; transform: scale3d(1.125, 1.125, 1.125) translateY(-3.5px); } .mc-skin-viewer-9x .player > .head > .accessory > .front { background-position: -360px -72px; } .mc-skin-viewer-9x .player > .head > .accessory > .back { background-position: -504px -72px; } .mc-skin-viewer-9x .player > .head > .accessory > .right { background-position: -288px -72px; } .mc-skin-viewer-9x .player > .head > .accessory > .left { background-position: -432px -72px; } .mc-skin-viewer-9x .player > .head > .accessory > .top { background-position: -360px 0px; } .mc-skin-viewer-9x .player > .head > .accessory > .bottom { background-position: -432px 0px; } .mc-skin-viewer-9x .player > .body { position: absolute; transform-style: preserve-3d; width: 72px; height: 72px; margin: 0 auto; transform: translateY(72px); background-image: none !important; } .mc-skin-viewer-9x .player > .body .front, .mc-skin-viewer-9x .player > .body .back, .mc-skin-viewer-9x .player > .body .left, .mc-skin-viewer-9x .player > .body .right, .mc-skin-viewer-9x .player > .body .top, .mc-skin-viewer-9x .player > .body .bottom { width: 72px; height: 108px; } .mc-skin-viewer-9x .player > .body .left, .mc-skin-viewer-9x .player > .body .right { width: 36px; } .mc-skin-viewer-9x .player > .body .top, .mc-skin-viewer-9x .player > .body .bottom { height: 36px; } .mc-skin-viewer-9x .player > .body .front { background-position: -180px -180px; transform: rotateX(0deg) rotateY(0deg) translateX(0px) translateY(0px) translateZ(18px); } .mc-skin-viewer-9x .player > .body .back { background-position: -288px -180px; transform: rotateX(0deg) rotateY(180deg) translateX(0px) translateY(0px) translateZ(18px); } .mc-skin-viewer-9x .player > .body .right { background-position: -144px -180px; transform: rotateX(0deg) rotateY(270deg) translateX(0px) translateY(0px) translateZ(18px); } .mc-skin-viewer-9x .player > .body .left { background-position: -252px -180px; transform: rotateX(0deg) rotateY(90deg) translateX(0px) translateY(0px) translateZ(54px); } .mc-skin-viewer-9x .player > .body .top { background-position: -180px -144px; transform: rotateX(90deg) rotateY(0deg) translateX(0px) translateY(0px) translateZ(18px); } .mc-skin-viewer-9x .player > .body .bottom { background-position: -252px -144px; transform: rotateX(270deg) rotateY(0deg) translateX(0px) translateY(0px) translateZ(90px); } .mc-skin-viewer-9x .player > .body > .accessory { transform-style: preserve-3d; transform: scale3d(1.0625, 1.0625, 1.0625) translateY(-3.375px); } .mc-skin-viewer-9x .player > .body > .accessory > .front { background-position: -180px -324px; } .mc-skin-viewer-9x .player > .body > .accessory > .back { background-position: -288px -324px; } .mc-skin-viewer-9x .player > .body > .accessory > .right { background-position: -144px -324px; } .mc-skin-viewer-9x .player > .body > .accessory > .left { background-position: -252px -324px; } .mc-skin-viewer-9x .player > .body > .accessory > .top { background-position: -180px -288px; } .mc-skin-viewer-9x .player > .body > .accessory > .bottom { background-position: -252px -288px; } .mc-skin-viewer-9x .player > .left-arm, .mc-skin-viewer-9x .player > .right-arm { position: absolute; transform-style: preserve-3d; width: 36px; height: 108px; margin: 0 auto; transform: translateY(72px) translateX(-36px); background-image: none !important; } .mc-skin-viewer-9x .player > .left-arm .front, .mc-skin-viewer-9x .player > .right-arm .front, .mc-skin-viewer-9x .player > .left-arm .back, .mc-skin-viewer-9x .player > .right-arm .back, .mc-skin-viewer-9x .player > .left-arm .left, .mc-skin-viewer-9x .player > .right-arm .left, .mc-skin-viewer-9x .player > .left-arm .right, .mc-skin-viewer-9x .player > .right-arm .right, .mc-skin-viewer-9x .player > .left-arm .top, .mc-skin-viewer-9x .player > .right-arm .top, .mc-skin-viewer-9x .player > .left-arm .bottom, .mc-skin-viewer-9x .player > .right-arm .bottom { width: 36px; height: 108px; } .mc-skin-viewer-9x .player > .left-arm .top, .mc-skin-viewer-9x .player > .right-arm .top, .mc-skin-viewer-9x .player > .left-arm .bottom, .mc-skin-viewer-9x .player > .right-arm .bottom { height: 36px; } .mc-skin-viewer-9x .player > .left-arm .front, .mc-skin-viewer-9x .player > .right-arm .front { background-position: -396px -180px; transform: rotateX(0deg) rotateY(0deg) translateX(0px) translateY(0px) translateZ(18px); } .mc-skin-viewer-9x .player > .left-arm .back, .mc-skin-viewer-9x .player > .right-arm .back { background-position: -468px -180px; transform: rotateX(0deg) rotateY(180deg) translateX(0px) translateY(0px) translateZ(18px); } .mc-skin-viewer-9x .player > .left-arm .right, .mc-skin-viewer-9x .player > .right-arm .right { background-position: -360px -180px; transform: rotateX(0deg) rotateY(270deg) translateX(0px) translateY(0px) translateZ(18px); } .mc-skin-viewer-9x .player > .left-arm .left, .mc-skin-viewer-9x .player > .right-arm .left { background-position: -432px -180px; transform: rotateX(0deg) rotateY(90deg) translateX(0px) translateY(0px) translateZ(18px); } .mc-skin-viewer-9x .player > .left-arm .top, .mc-skin-viewer-9x .player > .right-arm .top { background-position: -396px -144px; transform: rotateX(90deg) rotateY(0deg) translateX(0px) translateY(0px) translateZ(18px); } .mc-skin-viewer-9x .player > .left-arm .bottom, .mc-skin-viewer-9x .player > .right-arm .bottom { background-position: -432px -144px; transform: rotateX(270deg) rotateY(0deg) translateX(0px) translateY(0px) translateZ(90px); } .mc-skin-viewer-9x .player > .left-arm > .accessory, .mc-skin-viewer-9x .player > .right-arm > .accessory { transform-style: preserve-3d; transform: scale3d(1.0625, 1.0625, 1.0625) translateY(-3.375px); } .mc-skin-viewer-9x .player > .left-arm > .accessory .front, .mc-skin-viewer-9x .player > .right-arm > .accessory .front { background-position: -396px -324px; } .mc-skin-viewer-9x .player > .left-arm > .accessory .back, .mc-skin-viewer-9x .player > .right-arm > .accessory .back { background-position: -468px -324px; } .mc-skin-viewer-9x .player > .left-arm > .accessory .right, .mc-skin-viewer-9x .player > .right-arm > .accessory .right { background-position: -360px -324px; } .mc-skin-viewer-9x .player > .left-arm > .accessory .left, .mc-skin-viewer-9x .player > .right-arm > .accessory .left { background-position: -432px -324px; } .mc-skin-viewer-9x .player > .left-arm > .accessory .top, .mc-skin-viewer-9x .player > .right-arm > .accessory .top { background-position: -396px -288px; } .mc-skin-viewer-9x .player > .left-arm > .accessory .bottom, .mc-skin-viewer-9x .player > .right-arm > .accessory .bottom { background-position: -432px -288px; } .mc-skin-viewer-9x .player > .right-arm { transform: translateY(72px) translateX(72px) scaleX(-1); } .mc-skin-viewer-9x .player > .left-leg, .mc-skin-viewer-9x .player > .right-leg { position: absolute; transform-style: preserve-3d; width: 36px; height: 108px; margin: 0 auto; transform: translateY(180px); background-image: none !important; } .mc-skin-viewer-9x .player > .left-leg .front, .mc-skin-viewer-9x .player > .right-leg .front, .mc-skin-viewer-9x .player > .left-leg .back, .mc-skin-viewer-9x .player > .right-leg .back, .mc-skin-viewer-9x .player > .left-leg .left, .mc-skin-viewer-9x .player > .right-leg .left, .mc-skin-viewer-9x .player > .left-leg .right, .mc-skin-viewer-9x .player > .right-leg .right, .mc-skin-viewer-9x .player > .left-leg .top, .mc-skin-viewer-9x .player > .right-leg .top, .mc-skin-viewer-9x .player > .left-leg .bottom, .mc-skin-viewer-9x .player > .right-leg .bottom { width: 36px; height: 108px; } .mc-skin-viewer-9x .player > .left-leg .top, .mc-skin-viewer-9x .player > .right-leg .top, .mc-skin-viewer-9x .player > .left-leg .bottom, .mc-skin-viewer-9x .player > .right-leg .bottom { height: 36px; } .mc-skin-viewer-9x .player > .left-leg .front, .mc-skin-viewer-9x .player > .right-leg .front { background-position: -36px -180px; transform: rotateX(0deg) rotateY(0deg) translateX(0px) translateY(0px) translateZ(18px); } .mc-skin-viewer-9x .player > .left-leg .back, .mc-skin-viewer-9x .player > .right-leg .back { background-position: -108px -180px; transform: rotateX(0deg) rotateY(180deg) translateX(0px) translateY(0px) translateZ(18px); } .mc-skin-viewer-9x .player > .left-leg .right, .mc-skin-viewer-9x .player > .right-leg .right { background-position: 0px -180px; transform: rotateX(0deg) rotateY(270deg) translateX(0px) translateY(0px) translateZ(18px); } .mc-skin-viewer-9x .player > .left-leg .left, .mc-skin-viewer-9x .player > .right-leg .left { background-position: -72px -180px; transform: rotateX(0deg) rotateY(90deg) translateX(0px) translateY(0px) translateZ(18px); } .mc-skin-viewer-9x .player > .left-leg .top, .mc-skin-viewer-9x .player > .right-leg .top { background-position: -36px -144px; transform: rotateX(90deg) rotateY(0deg) translateX(0px) translateY(0px) translateZ(18px); } .mc-skin-viewer-9x .player > .left-leg .bottom, .mc-skin-viewer-9x .player > .right-leg .bottom { background-position: -72px -144px; transform: rotateX(270deg) rotateY(0deg) translateX(0px) translateY(0px) translateZ(90px); } .mc-skin-viewer-9x .player > .left-leg > .accessory, .mc-skin-viewer-9x .player > .right-leg > .accessory { transform-style: preserve-3d; transform: scale3d(1.03125, 1.03125, 1.03125) translateY(-1.6875px); } .mc-skin-viewer-9x .player > .left-leg > .accessory .front, .mc-skin-viewer-9x .player > .right-leg > .accessory .front { background-position: -36px -324px; } .mc-skin-viewer-9x .player > .left-leg > .accessory .back, .mc-skin-viewer-9x .player > .right-leg > .accessory .back { background-position: -108px -324px; } .mc-skin-viewer-9x .player > .left-leg > .accessory .right, .mc-skin-viewer-9x .player > .right-leg > .accessory .right { background-position: 0px -324px; } .mc-skin-viewer-9x .player > .left-leg > .accessory .left, .mc-skin-viewer-9x .player > .right-leg > .accessory .left { background-position: -72px -324px; } .mc-skin-viewer-9x .player > .left-leg > .accessory .top, .mc-skin-viewer-9x .player > .right-leg > .accessory .top { background-position: -36px -288px; } .mc-skin-viewer-9x .player > .left-leg > .accessory .bottom, .mc-skin-viewer-9x .player > .right-leg > .accessory .bottom { background-position: -72px -288px; } .mc-skin-viewer-9x .player > .right-leg { transform: translateY(180px) translateX(36px) scaleX(-1); } .mc-skin-viewer-9x:not(.legacy) .player > .right-arm { transform: translateY(72px) translateX(72px); } .mc-skin-viewer-9x:not(.legacy) .player > .right-arm .front { background-position: -324px -468px; } .mc-skin-viewer-9x:not(.legacy) .player > .right-arm .back { background-position: -396px -468px; } .mc-skin-viewer-9x:not(.legacy) .player > .right-arm .right { background-position: -288px -468px; } .mc-skin-viewer-9x:not(.legacy) .player > .right-arm .left { background-position: -360px -468px; } .mc-skin-viewer-9x:not(.legacy) .player > .right-arm .top { background-position: -324px -432px; } .mc-skin-viewer-9x:not(.legacy) .player > .right-arm .bottom { background-position: -360px -432px; } .mc-skin-viewer-9x:not(.legacy) .player > .right-arm > .accessory .front { background-position: -468px -468px; } .mc-skin-viewer-9x:not(.legacy) .player > .right-arm > .accessory .back { background-position: -540px -468px; } .mc-skin-viewer-9x:not(.legacy) .player > .right-arm > .accessory .right { background-position: -432px -468px; } .mc-skin-viewer-9x:not(.legacy) .player > .right-arm > .accessory .left { background-position: -504px -468px; } .mc-skin-viewer-9x:not(.legacy) .player > .right-arm > .accessory .top { background-position: -468px -432px; } .mc-skin-viewer-9x:not(.legacy) .player > .right-arm > .accessory .bottom { background-position: -504px -432px; } .mc-skin-viewer-9x:not(.legacy) .player > .right-leg { transform: translateY(180px) translateX(36px); } .mc-skin-viewer-9x:not(.legacy) .player > .right-leg .front { background-position: -180px -468px; } .mc-skin-viewer-9x:not(.legacy) .player > .right-leg .back { background-position: -252px -468px; } .mc-skin-viewer-9x:not(.legacy) .player > .right-leg .right { background-position: -144px -468px; } .mc-skin-viewer-9x:not(.legacy) .player > .right-leg .left { background-position: -216px -468px; } .mc-skin-viewer-9x:not(.legacy) .player > .right-leg .top { background-position: -180px -432px; } .mc-skin-viewer-9x:not(.legacy) .player > .right-leg .bottom { background-position: -216px -432px; } .mc-skin-viewer-9x:not(.legacy) .player > .right-leg > .accessory .front { background-position: -36px -468px; } .mc-skin-viewer-9x:not(.legacy) .player > .right-leg > .accessory .back { background-position: -108px -468px; } .mc-skin-viewer-9x:not(.legacy) .player > .right-leg > .accessory .right { background-position: 0px -468px; } .mc-skin-viewer-9x:not(.legacy) .player > .right-leg > .accessory .left { background-position: -72px -468px; } .mc-skin-viewer-9x:not(.legacy) .player > .right-leg > .accessory .top { background-position: -36px -432px; } .mc-skin-viewer-9x:not(.legacy) .player > .right-leg > .accessory .bottom { background-position: -72px -432px; } .mc-skin-viewer-9x.slim .player > .left-arm .front, .mc-skin-viewer-9x.slim .player > .right-arm .front, .mc-skin-viewer-9x.slim .player > .left-arm .back, .mc-skin-viewer-9x.slim .player > .right-arm .back, .mc-skin-viewer-9x.slim .player > .left-arm .top, .mc-skin-viewer-9x.slim .player > .right-arm .top, .mc-skin-viewer-9x.slim .player > .left-arm .bottom, .mc-skin-viewer-9x.slim .player > .right-arm .bottom { width: 27px; } .mc-skin-viewer-9x.slim .player > .left-arm .front { transform: rotateX(0deg) rotateY(0deg) translateX(9px) translateY(0px) translateZ(18px); } .mc-skin-viewer-9x.slim .player > .left-arm .back { background-position: -459px -180px; transform: rotateX(0deg) rotateY(180deg) translateX(-9px) translateY(0px) translateZ(18px); } .mc-skin-viewer-9x.slim .player > .left-arm .right { transform: rotateX(0deg) rotateY(270deg) translateX(0px) translateY(0px) translateZ(9px); } .mc-skin-viewer-9x.slim .player > .left-arm .left { background-position: -423px -180px; } .mc-skin-viewer-9x.slim .player > .left-arm .top { transform: rotateX(90deg) rotateY(0deg) translateX(9px) translateY(0px) translateZ(18px); } .mc-skin-viewer-9x.slim .player > .left-arm .bottom { background-position: -423px -144px; transform: rotateX(270deg) rotateY(0deg) translateX(9px) translateY(0px) translateZ(90px); } .mc-skin-viewer-9x.slim .player > .left-arm > .accessory .back { background-position: -459px -324px; } .mc-skin-viewer-9x.slim .player > .left-arm > .accessory .left { background-position: -423px -324px; } .mc-skin-viewer-9x.slim .player > .left-arm > .accessory .bottom { background-position: -423px -288px; } .mc-skin-viewer-9x.slim .player > .right-arm .back { background-position: -387px -468px; } .mc-skin-viewer-9x.slim .player > .right-arm .left { background-position: -351px -468px; transform: rotateX(0deg) rotateY(90deg) translateX(0px) translateY(0px) translateZ(9px); } .mc-skin-viewer-9x.slim .player > .right-arm .bottom { background-position: -351px -432px; } .mc-skin-viewer-9x.slim .player > .right-arm > .accessory .back { background-position: -531px -468px; } .mc-skin-viewer-9x.slim .player > .right-arm > .accessory .left { background-position: -495px -468px; } .mc-skin-viewer-9x.slim .player > .right-arm > .accessory .bottom { background-position: -495px -432px; } .mc-skin-viewer-9x.slim.legacy .player > .right-arm { transform: translateY(72px) translateX(63px) scaleX(-1); } .mc-skin-viewer-9x.slim.legacy .player > .right-arm .back { background-position: -459px -180px; } .mc-skin-viewer-9x.slim.legacy .player > .right-arm > .accessory .back { background-position: -459px -324px; } .mc-skin-viewer-9x .player .cape { transform-style: preserve-3d; transform: rotateY(180deg) translateX(-9px) translateZ(22.5px) translateY(67.5px) rotateX(5deg); } .mc-skin-viewer-9x .player .cape > .front, .mc-skin-viewer-9x .player .cape > .back, .mc-skin-viewer-9x .player .cape > .left, .mc-skin-viewer-9x .player .cape > .right, .mc-skin-viewer-9x .player .cape > .top, .mc-skin-viewer-9x .player .cape > .bottom { position: absolute; background-image: inherit!important; background-size: 576px 288px; backface-visibility: hidden; } .mc-skin-viewer-9x .player .cape > .front, .mc-skin-viewer-9x .player .cape > .back { width: 90px; height: 135px; } .mc-skin-viewer-9x .player .cape > .left, .mc-skin-viewer-9x .player .cape > .right { width: 9px; height: 135px; } .mc-skin-viewer-9x .player .cape > .top, .mc-skin-viewer-9x .player .cape > .bottom { width: 90px; height: 9px; } .mc-skin-viewer-9x .player .cape > .front { background-position: -9px -9px; transform: translateZ(4.5px); } .mc-skin-viewer-9x .player .cape > .back { background-position: -108px -9px; transform: translateZ(-4.5px) rotateY(180deg); } .mc-skin-viewer-9x .player .cape > .left { background-position: 0px -9px; transform: rotateY(270deg) translateZ(4.5px); } .mc-skin-viewer-9x .player .cape > .right { background-position: -99px -9px; transform: rotateY(-270deg) translateZ(85.5px); } .mc-skin-viewer-9x .player .cape > .top { background-position: -9px 0px; transform: rotateX(90deg) rotateY(0deg) translateX(0px) translateY(0px) translateZ(4.5px); } .mc-skin-viewer-9x .player .cape > .bottom { background-position: -99px 0px; transform: rotateX(-90deg) translateZ(130.5px); } .mc-skin-viewer-9x.legacy-cape > .player .cape > .front, .mc-skin-viewer-9x.legacy-cape > .player .cape > .back, .mc-skin-viewer-9x.legacy-cape > .player .cape > .left, .mc-skin-viewer-9x.legacy-cape > .player .cape > .right, .mc-skin-viewer-9x.legacy-cape > .player .cape > .top, .mc-skin-viewer-9x.legacy-cape > .player .cape > .bottom { background-size: 198px 153px; } .mc-skin-viewer-11x { width: 88px; height: 352px; margin: 15px auto 40px auto; perspective: 800px; perspective-origin: 50% 100px; transform-style: preserve-3d; background-image: none !important; image-rendering: optimizeSpeed; /* Legal fallback */ image-rendering: -moz-crisp-edges; /* Firefox */ image-rendering: -o-crisp-edges; /* Opera */ image-rendering: -webkit-optimize-contrast; /* Safari */ image-rendering: optimize-contrast; /* CSS3 Proposed */ image-rendering: crisp-edges; /* CSS4 Proposed */ image-rendering: pixelated; /* CSS4 Proposed */ -ms-interpolation-mode: nearest-neighbor; /* IE8+ */ } .mc-skin-viewer-11x.hide-accessories .accessory { display: none; } .mc-skin-viewer-11x.spin > .player { animation: spin 12s infinite linear; } .mc-skin-viewer-11x .player { transform-style: preserve-3d; } .mc-skin-viewer-11x .player .front, .mc-skin-viewer-11x .player .back, .mc-skin-viewer-11x .player .left, .mc-skin-viewer-11x .player .right, .mc-skin-viewer-11x .player .top, .mc-skin-viewer-11x .player .bottom { position: absolute; background-size: 704px; background-repeat: no-repeat; backface-visibility: hidden; } .mc-skin-viewer-11x .player .accessory { background-image: none; } .mc-skin-viewer-11x .player .accessory .front, .mc-skin-viewer-11x .player .accessory .back, .mc-skin-viewer-11x .player .accessory .left, .mc-skin-viewer-11x .player .accessory .right, .mc-skin-viewer-11x .player .accessory .top, .mc-skin-viewer-11x .player .accessory .bottom { backface-visibility: visible; } .mc-skin-viewer-11x .player > .head { position: absolute; transform-style: preserve-3d; width: 88px; height: 88px; margin: 0 auto; background-image: none !important; } .mc-skin-viewer-11x .player > .head .front, .mc-skin-viewer-11x .player > .head .back, .mc-skin-viewer-11x .player > .head .left, .mc-skin-viewer-11x .player > .head .right, .mc-skin-viewer-11x .player > .head .top, .mc-skin-viewer-11x .player > .head .bottom { width: 88px; height: 88px; } .mc-skin-viewer-11x .player > .head .front { background-position: -88px -88px; transform: rotateX(0deg) rotateY(0deg) translateX(0px) translateY(0px) translateZ(44px); } .mc-skin-viewer-11x .player > .head .back { background-position: -264px -88px; transform: rotateX(0deg) rotateY(180deg) translateX(0px) translateY(0px) translateZ(44px); } .mc-skin-viewer-11x .player > .head .right { background-position: 0px -88px; transform: rotateX(0deg) rotateY(270deg) translateX(0px) translateY(0px) translateZ(44px); } .mc-skin-viewer-11x .player > .head .left { background-position: -176px -88px; transform: rotateX(0deg) rotateY(90deg) translateX(0px) translateY(0px) translateZ(44px); } .mc-skin-viewer-11x .player > .head .top { background-position: -88px 0px; transform: rotateX(90deg) rotateY(0deg) translateX(0px) translateY(0px) translateZ(44px); } .mc-skin-viewer-11x .player > .head .bottom { background-position: -176px 0px; transform: rotateX(270deg) rotateY(0deg) rotateZ(180deg) translateX(0px) translateY(0px) translateZ(44px); } .mc-skin-viewer-11x .player > .head > .accessory { transform-style: preserve-3d; transform: scale3d(1.125, 1.125, 1.125) translateY(-4.5px); } .mc-skin-viewer-11x .player > .head > .accessory > .front { background-position: -440px -88px; } .mc-skin-viewer-11x .player > .head > .accessory > .back { background-position: -616px -88px; } .mc-skin-viewer-11x .player > .head > .accessory > .right { background-position: -352px -88px; } .mc-skin-viewer-11x .player > .head > .accessory > .left { background-position: -528px -88px; } .mc-skin-viewer-11x .player > .head > .accessory > .top { background-position: -440px 0px; } .mc-skin-viewer-11x .player > .head > .accessory > .bottom { background-position: -528px 0px; } .mc-skin-viewer-11x .player > .body { position: absolute; transform-style: preserve-3d; width: 88px; height: 88px; margin: 0 auto; transform: translateY(88px); background-image: none !important; } .mc-skin-viewer-11x .player > .body .front, .mc-skin-viewer-11x .player > .body .back, .mc-skin-viewer-11x .player > .body .left, .mc-skin-viewer-11x .player > .body .right, .mc-skin-viewer-11x .player > .body .top, .mc-skin-viewer-11x .player > .body .bottom { width: 88px; height: 132px; } .mc-skin-viewer-11x .player > .body .left, .mc-skin-viewer-11x .player > .body .right { width: 44px; } .mc-skin-viewer-11x .player > .body .top, .mc-skin-viewer-11x .player > .body .bottom { height: 44px; } .mc-skin-viewer-11x .player > .body .front { background-position: -220px -220px; transform: rotateX(0deg) rotateY(0deg) translateX(0px) translateY(0px) translateZ(22px); } .mc-skin-viewer-11x .player > .body .back { background-position: -352px -220px; transform: rotateX(0deg) rotateY(180deg) translateX(0px) translateY(0px) translateZ(22px); } .mc-skin-viewer-11x .player > .body .right { background-position: -176px -220px; transform: rotateX(0deg) rotateY(270deg) translateX(0px) translateY(0px) translateZ(22px); } .mc-skin-viewer-11x .player > .body .left { background-position: -308px -220px; transform: rotateX(0deg) rotateY(90deg) translateX(0px) translateY(0px) translateZ(66px); } .mc-skin-viewer-11x .player > .body .top { background-position: -220px -176px; transform: rotateX(90deg) rotateY(0deg) translateX(0px) translateY(0px) translateZ(22px); } .mc-skin-viewer-11x .player > .body .bottom { background-position: -308px -176px; transform: rotateX(270deg) rotateY(0deg) translateX(0px) translateY(0px) translateZ(110px); } .mc-skin-viewer-11x .player > .body > .accessory { transform-style: preserve-3d; transform: scale3d(1.0625, 1.0625, 1.0625) translateY(-4.125px); } .mc-skin-viewer-11x .player > .body > .accessory > .front { background-position: -220px -396px; } .mc-skin-viewer-11x .player > .body > .accessory > .back { background-position: -352px -396px; } .mc-skin-viewer-11x .player > .body > .accessory > .right { background-position: -176px -396px; } .mc-skin-viewer-11x .player > .body > .accessory > .left { background-position: -308px -396px; } .mc-skin-viewer-11x .player > .body > .accessory > .top { background-position: -220px -352px; } .mc-skin-viewer-11x .player > .body > .accessory > .bottom { background-position: -308px -352px; } .mc-skin-viewer-11x .player > .left-arm, .mc-skin-viewer-11x .player > .right-arm { position: absolute; transform-style: preserve-3d; width: 44px; height: 132px; margin: 0 auto; transform: translateY(88px) translateX(-44px); background-image: none !important; } .mc-skin-viewer-11x .player > .left-arm .front, .mc-skin-viewer-11x .player > .right-arm .front, .mc-skin-viewer-11x .player > .left-arm .back, .mc-skin-viewer-11x .player > .right-arm .back, .mc-skin-viewer-11x .player > .left-arm .left, .mc-skin-viewer-11x .player > .right-arm .left, .mc-skin-viewer-11x .player > .left-arm .right, .mc-skin-viewer-11x .player > .right-arm .right, .mc-skin-viewer-11x .player > .left-arm .top, .mc-skin-viewer-11x .player > .right-arm .top, .mc-skin-viewer-11x .player > .left-arm .bottom, .mc-skin-viewer-11x .player > .right-arm .bottom { width: 44px; height: 132px; } .mc-skin-viewer-11x .player > .left-arm .top, .mc-skin-viewer-11x .player > .right-arm .top, .mc-skin-viewer-11x .player > .left-arm .bottom, .mc-skin-viewer-11x .player > .right-arm .bottom { height: 44px; } .mc-skin-viewer-11x .player > .left-arm .front, .mc-skin-viewer-11x .player > .right-arm .front { background-position: -484px -220px; transform: rotateX(0deg) rotateY(0deg) translateX(0px) translateY(0px) translateZ(22px); } .mc-skin-viewer-11x .player > .left-arm .back, .mc-skin-viewer-11x .player > .right-arm .back { background-position: -572px -220px; transform: rotateX(0deg) rotateY(180deg) translateX(0px) translateY(0px) translateZ(22px); } .mc-skin-viewer-11x .player > .left-arm .right, .mc-skin-viewer-11x .player > .right-arm .right { background-position: -440px -220px; transform: rotateX(0deg) rotateY(270deg) translateX(0px) translateY(0px) translateZ(22px); } .mc-skin-viewer-11x .player > .left-arm .left, .mc-skin-viewer-11x .player > .right-arm .left { background-position: -528px -220px; transform: rotateX(0deg) rotateY(90deg) translateX(0px) translateY(0px) translateZ(22px); } .mc-skin-viewer-11x .player > .left-arm .top, .mc-skin-viewer-11x .player > .right-arm .top { background-position: -484px -176px; transform: rotateX(90deg) rotateY(0deg) translateX(0px) translateY(0px) translateZ(22px); } .mc-skin-viewer-11x .player > .left-arm .bottom, .mc-skin-viewer-11x .player > .right-arm .bottom { background-position: -528px -176px; transform: rotateX(270deg) rotateY(0deg) translateX(0px) translateY(0px) translateZ(110px); } .mc-skin-viewer-11x .player > .left-arm > .accessory, .mc-skin-viewer-11x .player > .right-arm > .accessory { transform-style: preserve-3d; transform: scale3d(1.0625, 1.0625, 1.0625) translateY(-4.125px); } .mc-skin-viewer-11x .player > .left-arm > .accessory .front, .mc-skin-viewer-11x .player > .right-arm > .accessory .front { background-position: -484px -396px; } .mc-skin-viewer-11x .player > .left-arm > .accessory .back, .mc-skin-viewer-11x .player > .right-arm > .accessory .back { background-position: -572px -396px; } .mc-skin-viewer-11x .player > .left-arm > .accessory .right, .mc-skin-viewer-11x .player > .right-arm > .accessory .right { background-position: -440px -396px; } .mc-skin-viewer-11x .player > .left-arm > .accessory .left, .mc-skin-viewer-11x .player > .right-arm > .accessory .left { background-position: -528px -396px; } .mc-skin-viewer-11x .player > .left-arm > .accessory .top, .mc-skin-viewer-11x .player > .right-arm > .accessory .top { background-position: -484px -352px; } .mc-skin-viewer-11x .player > .left-arm > .accessory .bottom, .mc-skin-viewer-11x .player > .right-arm > .accessory .bottom { background-position: -528px -352px; } .mc-skin-viewer-11x .player > .right-arm { transform: translateY(88px) translateX(88px) scaleX(-1); } .mc-skin-viewer-11x .player > .left-leg, .mc-skin-viewer-11x .player > .right-leg { position: absolute; transform-style: preserve-3d; width: 44px; height: 132px; margin: 0 auto; transform: translateY(220px); background-image: none !important; } .mc-skin-viewer-11x .player > .left-leg .front, .mc-skin-viewer-11x .player > .right-leg .front, .mc-skin-viewer-11x .player > .left-leg .back, .mc-skin-viewer-11x .player > .right-leg .back, .mc-skin-viewer-11x .player > .left-leg .left, .mc-skin-viewer-11x .player > .right-leg .left, .mc-skin-viewer-11x .player > .left-leg .right, .mc-skin-viewer-11x .player > .right-leg .right, .mc-skin-viewer-11x .player > .left-leg .top, .mc-skin-viewer-11x .player > .right-leg .top, .mc-skin-viewer-11x .player > .left-leg .bottom, .mc-skin-viewer-11x .player > .right-leg .bottom { width: 44px; height: 132px; } .mc-skin-viewer-11x .player > .left-leg .top, .mc-skin-viewer-11x .player > .right-leg .top, .mc-skin-viewer-11x .player > .left-leg .bottom, .mc-skin-viewer-11x .player > .right-leg .bottom { height: 44px; } .mc-skin-viewer-11x .player > .left-leg .front, .mc-skin-viewer-11x .player > .right-leg .front { background-position: -44px -220px; transform: rotateX(0deg) rotateY(0deg) translateX(0px) translateY(0px) translateZ(22px); } .mc-skin-viewer-11x .player > .left-leg .back, .mc-skin-viewer-11x .player > .right-leg .back { background-position: -132px -220px; transform: rotateX(0deg) rotateY(180deg) translateX(0px) translateY(0px) translateZ(22px); } .mc-skin-viewer-11x .player > .left-leg .right, .mc-skin-viewer-11x .player > .right-leg .right { background-position: 0px -220px; transform: rotateX(0deg) rotateY(270deg) translateX(0px) translateY(0px) translateZ(22px); } .mc-skin-viewer-11x .player > .left-leg .left, .mc-skin-viewer-11x .player > .right-leg .left { background-position: -88px -220px; transform: rotateX(0deg) rotateY(90deg) translateX(0px) translateY(0px) translateZ(22px); } .mc-skin-viewer-11x .player > .left-leg .top, .mc-skin-viewer-11x .player > .right-leg .top { background-position: -44px -176px; transform: rotateX(90deg) rotateY(0deg) translateX(0px) translateY(0px) translateZ(22px); } .mc-skin-viewer-11x .player > .left-leg .bottom, .mc-skin-viewer-11x .player > .right-leg .bottom { background-position: -88px -176px; transform: rotateX(270deg) rotateY(0deg) translateX(0px) translateY(0px) translateZ(110px); } .mc-skin-viewer-11x .player > .left-leg > .accessory, .mc-skin-viewer-11x .player > .right-leg > .accessory { transform-style: preserve-3d; transform: scale3d(1.03125, 1.03125, 1.03125) translateY(-2.0625px); } .mc-skin-viewer-11x .player > .left-leg > .accessory .front, .mc-skin-viewer-11x .player > .right-leg > .accessory .front { background-position: -44px -396px; } .mc-skin-viewer-11x .player > .left-leg > .accessory .back, .mc-skin-viewer-11x .player > .right-leg > .accessory .back { background-position: -132px -396px; } .mc-skin-viewer-11x .player > .left-leg > .accessory .right, .mc-skin-viewer-11x .player > .right-leg > .accessory .right { background-position: 0px -396px; } .mc-skin-viewer-11x .player > .left-leg > .accessory .left, .mc-skin-viewer-11x .player > .right-leg > .accessory .left { background-position: -88px -396px; } .mc-skin-viewer-11x .player > .left-leg > .accessory .top, .mc-skin-viewer-11x .player > .right-leg > .accessory .top { background-position: -44px -352px; } .mc-skin-viewer-11x .player > .left-leg > .accessory .bottom, .mc-skin-viewer-11x .player > .right-leg > .accessory .bottom { background-position: -88px -352px; } .mc-skin-viewer-11x .player > .right-leg { transform: translateY(220px) translateX(44px) scaleX(-1); } .mc-skin-viewer-11x:not(.legacy) .player > .right-arm { transform: translateY(88px) translateX(88px); } .mc-skin-viewer-11x:not(.legacy) .player > .right-arm .front { background-position: -396px -572px; } .mc-skin-viewer-11x:not(.legacy) .player > .right-arm .back { background-position: -484px -572px; } .mc-skin-viewer-11x:not(.legacy) .player > .right-arm .right { background-position: -352px -572px; } .mc-skin-viewer-11x:not(.legacy) .player > .right-arm .left { background-position: -440px -572px; } .mc-skin-viewer-11x:not(.legacy) .player > .right-arm .top { background-position: -396px -528px; } .mc-skin-viewer-11x:not(.legacy) .player > .right-arm .bottom { background-position: -440px -528px; } .mc-skin-viewer-11x:not(.legacy) .player > .right-arm > .accessory .front { background-position: -572px -572px; } .mc-skin-viewer-11x:not(.legacy) .player > .right-arm > .accessory .back { background-position: -660px -572px; } .mc-skin-viewer-11x:not(.legacy) .player > .right-arm > .accessory .right { background-position: -528px -572px; } .mc-skin-viewer-11x:not(.legacy) .player > .right-arm > .accessory .left { background-position: -616px -572px; } .mc-skin-viewer-11x:not(.legacy) .player > .right-arm > .accessory .top { background-position: -572px -528px; } .mc-skin-viewer-11x:not(.legacy) .player > .right-arm > .accessory .bottom { background-position: -616px -528px; } .mc-skin-viewer-11x:not(.legacy) .player > .right-leg { transform: translateY(220px) translateX(44px); } .mc-skin-viewer-11x:not(.legacy) .player > .right-leg .front { background-position: -220px -572px; } .mc-skin-viewer-11x:not(.legacy) .player > .right-leg .back { background-position: -308px -572px; } .mc-skin-viewer-11x:not(.legacy) .player > .right-leg .right { background-position: -176px -572px; } .mc-skin-viewer-11x:not(.legacy) .player > .right-leg .left { background-position: -264px -572px; } .mc-skin-viewer-11x:not(.legacy) .player > .right-leg .top { background-position: -220px -528px; } .mc-skin-viewer-11x:not(.legacy) .player > .right-leg .bottom { background-position: -264px -528px; } .mc-skin-viewer-11x:not(.legacy) .player > .right-leg > .accessory .front { background-position: -44px -572px; } .mc-skin-viewer-11x:not(.legacy) .player > .right-leg > .accessory .back { background-position: -132px -572px; } .mc-skin-viewer-11x:not(.legacy) .player > .right-leg > .accessory .right { background-position: 0px -572px; } .mc-skin-viewer-11x:not(.legacy) .player > .right-leg > .accessory .left { background-position: -88px -572px; } .mc-skin-viewer-11x:not(.legacy) .player > .right-leg > .accessory .top { background-position: -44px -528px; } .mc-skin-viewer-11x:not(.legacy) .player > .right-leg > .accessory .bottom { background-position: -88px -528px; } .mc-skin-viewer-11x.slim .player > .left-arm .front, .mc-skin-viewer-11x.slim .player > .right-arm .front, .mc-skin-viewer-11x.slim .player > .left-arm .back, .mc-skin-viewer-11x.slim .player > .right-arm .back, .mc-skin-viewer-11x.slim .player > .left-arm .top, .mc-skin-viewer-11x.slim .player > .right-arm .top, .mc-skin-viewer-11x.slim .player > .left-arm .bottom, .mc-skin-viewer-11x.slim .player > .right-arm .bottom { width: 33px; } .mc-skin-viewer-11x.slim .player > .left-arm .front { transform: rotateX(0deg) rotateY(0deg) translateX(11px) translateY(0px) translateZ(22px); } .mc-skin-viewer-11x.slim .player > .left-arm .back { background-position: -561px -220px; transform: rotateX(0deg) rotateY(180deg) translateX(-11px) translateY(0px) translateZ(22px); } .mc-skin-viewer-11x.slim .player > .left-arm .right { transform: rotateX(0deg) rotateY(270deg) translateX(0px) translateY(0px) translateZ(11px); } .mc-skin-viewer-11x.slim .player > .left-arm .left { background-position: -517px -220px; } .mc-skin-viewer-11x.slim .player > .left-arm .top { transform: rotateX(90deg) rotateY(0deg) translateX(11px) translateY(0px) translateZ(22px); } .mc-skin-viewer-11x.slim .player > .left-arm .bottom { background-position: -517px -176px; transform: rotateX(270deg) rotateY(0deg) translateX(11px) translateY(0px) translateZ(110px); } .mc-skin-viewer-11x.slim .player > .left-arm > .accessory .back { background-position: -561px -396px; } .mc-skin-viewer-11x.slim .player > .left-arm > .accessory .left { background-position: -517px -396px; } .mc-skin-viewer-11x.slim .player > .left-arm > .accessory .bottom { background-position: -517px -352px; } .mc-skin-viewer-11x.slim .player > .right-arm .back { background-position: -473px -572px; } .mc-skin-viewer-11x.slim .player > .right-arm .left { background-position: -429px -572px; transform: rotateX(0deg) rotateY(90deg) translateX(0px) translateY(0px) translateZ(11px); } .mc-skin-viewer-11x.slim .player > .right-arm .bottom { background-position: -429px -528px; } .mc-skin-viewer-11x.slim .player > .right-arm > .accessory .back { background-position: -649px -572px; } .mc-skin-viewer-11x.slim .player > .right-arm > .accessory .left { background-position: -605px -572px; } .mc-skin-viewer-11x.slim .player > .right-arm > .accessory .bottom { background-position: -605px -528px; } .mc-skin-viewer-11x.slim.legacy .player > .right-arm { transform: translateY(88px) translateX(77px) scaleX(-1); } .mc-skin-viewer-11x.slim.legacy .player > .right-arm .back { background-position: -561px -220px; } .mc-skin-viewer-11x.slim.legacy .player > .right-arm > .accessory .back { background-position: -561px -396px; } .mc-skin-viewer-11x .player .cape { transform-style: preserve-3d; transform: rotateY(180deg) translateX(-11px) translateZ(27.5px) translateY(82.5px) rotateX(5deg); } .mc-skin-viewer-11x .player .cape > .front, .mc-skin-viewer-11x .player .cape > .back, .mc-skin-viewer-11x .player .cape > .left, .mc-skin-viewer-11x .player .cape > .right, .mc-skin-viewer-11x .player .cape > .top, .mc-skin-viewer-11x .player .cape > .bottom { position: absolute; background-image: inherit!important; background-size: 704px 352px; backface-visibility: hidden; } .mc-skin-viewer-11x .player .cape > .front, .mc-skin-viewer-11x .player .cape > .back { width: 110px; height: 165px; } .mc-skin-viewer-11x .player .cape > .left, .mc-skin-viewer-11x .player .cape > .right { width: 11px; height: 165px; } .mc-skin-viewer-11x .player .cape > .top, .mc-skin-viewer-11x .player .cape > .bottom { width: 110px; height: 11px; } .mc-skin-viewer-11x .player .cape > .front { background-position: -11px -11px; transform: translateZ(5.5px); } .mc-skin-viewer-11x .player .cape > .back { background-position: -132px -11px; transform: translateZ(-5.5px) rotateY(180deg); } .mc-skin-viewer-11x .player .cape > .left { background-position: 0px -11px; transform: rotateY(270deg) translateZ(5.5px); } .mc-skin-viewer-11x .player .cape > .right { background-position: -121px -11px; transform: rotateY(-270deg) translateZ(104.5px); } .mc-skin-viewer-11x .player .cape > .top { background-position: -11px 0px; transform: rotateX(90deg) rotateY(0deg) translateX(0px) translateY(0px) translateZ(5.5px); } .mc-skin-viewer-11x .player .cape > .bottom { background-position: -121px 0px; transform: rotateX(-90deg) translateZ(159.5px); } .mc-skin-viewer-11x.legacy-cape > .player .cape > .front, .mc-skin-viewer-11x.legacy-cape > .player .cape > .back, .mc-skin-viewer-11x.legacy-cape > .player .cape > .left, .mc-skin-viewer-11x.legacy-cape > .player .cape > .right, .mc-skin-viewer-11x.legacy-cape > .player .cape > .top, .mc-skin-viewer-11x.legacy-cape > .player .cape > .bottom { background-size: 242px 187px; } .mc-cape-viewer-9x { width: 90px; height: 135px; margin: 10px auto; perspective: 800px; perspective-origin: 50% 100px; background-image: none; image-rendering: optimizeSpeed; /* Legal fallback */ image-rendering: -moz-crisp-edges; /* Firefox */ image-rendering: -o-crisp-edges; /* Opera */ image-rendering: -webkit-optimize-contrast; /* Safari */ image-rendering: optimize-contrast; /* CSS3 Proposed */ image-rendering: crisp-edges; /* CSS4 Proposed */ image-rendering: pixelated; /* CSS4 Proposed */ -ms-interpolation-mode: nearest-neighbor; /* IE8+ */ } .mc-cape-viewer-9x .wrapper { transform-style: preserve-3d; width: 90px; height: 135px; position: relative; background-image: none !important; } .mc-cape-viewer-9x .wrapper .cape { transform-style: preserve-3d; } .mc-cape-viewer-9x .wrapper .cape > .front, .mc-cape-viewer-9x .wrapper .cape > .back, .mc-cape-viewer-9x .wrapper .cape > .left, .mc-cape-viewer-9x .wrapper .cape > .right, .mc-cape-viewer-9x .wrapper .cape > .top, .mc-cape-viewer-9x .wrapper .cape > .bottom { position: absolute; background-size: 576px 288px; backface-visibility: hidden; } .mc-cape-viewer-9x .wrapper .cape > .front, .mc-cape-viewer-9x .wrapper .cape > .back { width: 90px; height: 135px; } .mc-cape-viewer-9x .wrapper .cape > .left, .mc-cape-viewer-9x .wrapper .cape > .right { width: 9px; height: 135px; } .mc-cape-viewer-9x .wrapper .cape > .top, .mc-cape-viewer-9x .wrapper .cape > .bottom { width: 90px; height: 9px; } .mc-cape-viewer-9x .wrapper .cape > .front { background-position: -9px -9px; transform: translateZ(4.5px); } .mc-cape-viewer-9x .wrapper .cape > .back { background-position: -108px -9px; transform: translateZ(-4.5px) rotateY(180deg); } .mc-cape-viewer-9x .wrapper .cape > .left { background-position: 0px -9px; transform: rotateY(270deg) translateZ(4.5px); } .mc-cape-viewer-9x .wrapper .cape > .right { background-position: -99px -9px; transform: rotateY(-270deg) translateZ(85.5px); } .mc-cape-viewer-9x .wrapper .cape > .top { background-position: -9px 0px; transform: rotateX(90deg) rotateY(0deg) translateX(0px) translateY(0px) translateZ(4.5px); } .mc-cape-viewer-9x .wrapper .cape > .bottom { background-position: -99px 0px; transform: rotateX(-90deg) translateZ(130.5px); } .mc-cape-viewer-9x.legacy .wrapper .cape > .front, .mc-cape-viewer-9x.legacy .wrapper .cape > .back, .mc-cape-viewer-9x.legacy .wrapper .cape > .left, .mc-cape-viewer-9x.legacy .wrapper .cape > .right { background-size: 198px 153px; } .mc-cape-viewer-9x.waving > .wrapper > .cape { animation: waving 2s infinite ease-in-out; } .mc-cape-viewer-9x.spin > .wrapper > .cape { animation: spin 12s infinite linear; }