Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                
<html lang="">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Title</title>
</head>
<body>
<div class="container">
    <div class="bottle">
        <img src="//framework.blcmsdev.com/images/product.png"/>
        <div class="label">
            <div class="side"></div>
            <div class="side"></div>
            <div class="side"></div>
            <div class="side"></div>
            <div class="side"></div>
            <div class="side"></div>
            <div class="side"></div>
            <div class="side"></div>
            <div class="side"></div>
            <div class="side"></div>
            <div class="side"></div>
            <div class="side"></div>
            <div class="side"></div>
            <div class="side"></div>
            <div class="side"></div>
            <div class="side"></div>
            <div class="side"></div>
            <div class="side"></div>
            <div class="side"></div>
            <div class="side"></div>
            <div class="side"></div>
            <div class="side"></div>
            <div class="side"></div>
            <div class="side"></div>
            <div class="side"></div>
            <div class="side"></div>
            <div class="side"></div>
            <div class="side"></div>
            <div class="side"></div>
            <div class="side"></div>
            <div class="side"></div>
            <div class="side"></div>
            <div class="side"></div>
            <div class="side"></div>
            <div class="side"></div>
            <div class="side"></div>
            <div class="side"></div>
            <div class="side"></div>
            <div class="side"></div>
            <div class="side"></div>
            <div class="side"></div>
            <div class="side"></div>
            <div class="side"></div>
            <div class="side"></div>
            <div class="side"></div>
            <div class="side"></div>
            <div class="side"></div>
            <div class="side"></div>
            <div class="side"></div>
            <div class="side"></div>
            <div class="side"></div>
            <div class="side"></div>
            <div class="side"></div>
            <div class="side"></div>
            <div class="side"></div>
            <div class="side"></div>
            <div class="side"></div>
            <div class="side"></div>
            <div class="side"></div>
            <div class="side"></div>
            <div class="side"></div>
            <div class="side"></div>
            <div class="side"></div>
            <div class="side"></div>
            <div class="side"></div>
            <div class="side"></div>
            <div class="side"></div>
            <div class="side"></div>
            <div class="side"></div>
            <div class="side"></div>
            <div class="side"></div>
            <div class="side"></div>
            <div class="side"></div>
            <div class="side"></div>
            <div class="side"></div>
            <div class="side"></div>
            <div class="side"></div>
            <div class="side"></div>
            <div class="side"></div>
            <div class="side"></div>
            <div class="side"></div>
            <div class="side"></div>
            <div class="side"></div>
            <div class="side"></div>
            <div class="side"></div>
            <div class="side"></div>
            <div class="side"></div>
            <div class="side"></div>
            <div class="side"></div>
            <div class="side"></div>
            <div class="side"></div>
            <div class="side"></div>
            <div class="side"></div>
            <div class="side"></div>
            <div class="side"></div>
            <div class="side"></div>
        </div>
    </div>
</div>

</body>
</html>


              
            
!

CSS

              
                .bottle {
	width: 10.125px;
	-webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate3d(650px, 190px, 40px);
	   -moz-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate3d(650px, 190px, 40px);
	        transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate3d(350px, 190px, 40px);
	-webkit-transform-style: preserve-3d;
	   -moz-transform-style: preserve-3d;
	        transform-style: preserve-3d;
}

.bottle > img {
	position: absolute;
	top: -180px;
	left: -182px;
	width: 374px;
}

.label {
	-webkit-animation: spin 50s infinite linear;
	   -moz-animation: spin 50s infinite linear;
	        animation: spin 50s infinite linear; 

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

.side {
	position: absolute;
	width: 8.25px;
	/* background image is 792px 320px, try with green-hills or thailand-sunrise.jpg */
	height: 359px;
	background: #000 url('http://www.aprovenproduct.com/sites/app/a/img/items/b4385a95b66679ab6255919a97e27f91.jpg');
}

@-webkit-keyframes spin {
	from {
		-webkit-transform: rotateY(0deg);
		        transform: rotateY(0deg);
	}
	to {
		-webkit-transform: rotateY(-360deg);
		        transform: rotateY(-360deg);
	}
}

@-moz-keyframes spin {
	from {
		-moz-transform: rotateY(0deg);
		     transform: rotateY(0deg);
	}
	to {
		-moz-transform: rotateY(-360deg);
		     transform: rotateY(-360deg);
	}
}

@keyframes spin {
	from {
		-webkit-transform: rotateY(0deg);
		   -moz-transform: rotateY(0deg);
		        transform: rotateY(0deg);
	}
	to {
		-webkit-transform: rotateY(-360deg);
		   -moz-transform: rotateY(-360deg);
		        transform: rotateY(-360deg);
	}
}

@mixin makeSide() {
  
}

.side:nth-of-type(1) {
	background-position: 972px 0; 
	-webkit-transform: rotateY(0deg) translateZ(154px);
	   -moz-transform: rotateY(0deg) translateZ(154px);
	        transform: rotateY(0deg) translateZ(154px);
}

.side:nth-of-type(2) {
	background-position: 961.875px 0; 
	-webkit-transform: rotateY(3.75deg) translateZ(154px);
	   -moz-transform: rotateY(3.75deg) translateZ(154px);
	        transform: rotateY(3.75deg) translateZ(154px);
}

.side:nth-of-type(3) {
	background-position: 951.75px 0; 
	-webkit-transform: rotateY(7.5deg) translateZ(154px);
	   -moz-transform: rotateY(7.5deg) translateZ(154px);
	        transform: rotateY(7.5deg) translateZ(154px);
}

.side:nth-of-type(4) {
	background-position: 941.625px 0; 
	-webkit-transform: rotateY(11.25deg) translateZ(154px);
	   -moz-transform: rotateY(11.25deg) translateZ(154px);
	        transform: rotateY(11.25deg) translateZ(154px);
}

.side:nth-of-type(5) {
	background-position: 931.5px 0; 
	-webkit-transform: rotateY(15deg) translateZ(154px);
	   -moz-transform: rotateY(15deg) translateZ(154px);
	        transform: rotateY(15deg) translateZ(154px);
}

.side:nth-of-type(6) {
	background-position: 921.375px 0; 
	-webkit-transform: rotateY(18.75deg) translateZ(154px);
	   -moz-transform: rotateY(18.75deg) translateZ(154px);
	        transform: rotateY(18.75deg) translateZ(154px);
}

.side:nth-of-type(7) {
	background-position: 911.25px 0; 
	-webkit-transform: rotateY(22.5deg) translateZ(154px);
	   -moz-transform: rotateY(22.5deg) translateZ(154px);
	        transform: rotateY(22.5deg) translateZ(154px);
}

.side:nth-of-type(8) {
	background-position: 901.125px 0; 
	-webkit-transform: rotateY(26.25deg) translateZ(154px);
	   -moz-transform: rotateY(26.25deg) translateZ(154px);
	        transform: rotateY(26.25deg) translateZ(154px);
}

.side:nth-of-type(9) {
	background-position: 891px 0; 
	-webkit-transform: rotateY(30deg) translateZ(154px);
	   -moz-transform: rotateY(30deg) translateZ(154px);
	        transform: rotateY(30deg) translateZ(154px);
}

.side:nth-of-type(10) {
	background-position: 880.875px 0; 
	-webkit-transform: rotateY(33.75deg) translateZ(154px);
	   -moz-transform: rotateY(33.75deg) translateZ(154px);
	        transform: rotateY(33.75deg) translateZ(154px);
}

.side:nth-of-type(11) {
	background-position: 870.75px 0; 
	-webkit-transform: rotateY(37.5deg) translateZ(154px);
	   -moz-transform: rotateY(37.5deg) translateZ(154px);
	        transform: rotateY(37.5deg) translateZ(154px);
}

.side:nth-of-type(12) {
	background-position: 860.625px 0; 
	-webkit-transform: rotateY(41.25deg) translateZ(154px);
	   -moz-transform: rotateY(41.25deg) translateZ(154px);
	        transform: rotateY(41.25deg) translateZ(154px);
}

.side:nth-of-type(13) {
	background-position: 850.5px 0; 
	-webkit-transform: rotateY(45deg) translateZ(154px);
	   -moz-transform: rotateY(45deg) translateZ(154px);
	        transform: rotateY(45deg) translateZ(154px);
}

.side:nth-of-type(14) {
	background-position: 840.375px 0; 
	-webkit-transform: rotateY(48.75deg) translateZ(154px);
	   -moz-transform: rotateY(48.75deg) translateZ(154px);
	        transform: rotateY(48.75deg) translateZ(154px);
}

.side:nth-of-type(15) {
	background-position: 830.25px 0; 
	-webkit-transform: rotateY(52.5deg) translateZ(154px);
	   -moz-transform: rotateY(52.5deg) translateZ(154px);
	        transform: rotateY(52.5deg) translateZ(154px);
}

.side:nth-of-type(16) {
	background-position: 820.125px 0; 
	-webkit-transform: rotateY(56.25deg) translateZ(154px);
	   -moz-transform: rotateY(56.25deg) translateZ(154px);
	        transform: rotateY(56.25deg) translateZ(154px);
}

.side:nth-of-type(17) {
	background-position: 810px 0; 
	-webkit-transform: rotateY(60deg) translateZ(154px);
	   -moz-transform: rotateY(60deg) translateZ(154px);
	        transform: rotateY(60deg) translateZ(154px);
}

.side:nth-of-type(18) {
	background-position: 799.875px 0; 
	-webkit-transform: rotateY(63.75deg) translateZ(154px);
	   -moz-transform: rotateY(63.75deg) translateZ(154px);
	        transform: rotateY(63.75deg) translateZ(154px);
}

.side:nth-of-type(19) {
	background-position: 789.75px 0; 
	-webkit-transform: rotateY(67.5deg) translateZ(154px);
	   -moz-transform: rotateY(67.5deg) translateZ(154px);
	        transform: rotateY(67.5deg) translateZ(154px);
}

.side:nth-of-type(20) {
	background-position: 779.625px 0; 
	-webkit-transform: rotateY(71.25deg) translateZ(154px);
	   -moz-transform: rotateY(71.25deg) translateZ(154px);
	        transform: rotateY(71.25deg) translateZ(154px);
}

.side:nth-of-type(21) {
	background-position: 769.5px 0; 
	-webkit-transform: rotateY(75deg) translateZ(154px);
	   -moz-transform: rotateY(75deg) translateZ(154px);
	        transform: rotateY(75deg) translateZ(154px);
}

.side:nth-of-type(22) {
	background-position: 759.375px 0; 
	-webkit-transform: rotateY(78.75deg) translateZ(154px);
	   -moz-transform: rotateY(78.75deg) translateZ(154px);
	        transform: rotateY(78.75deg) translateZ(154px);
}

.side:nth-of-type(23) {
	background-position: 749.25px 0; 
	-webkit-transform: rotateY(82.5deg) translateZ(154px);
	   -moz-transform: rotateY(82.5deg) translateZ(154px);
	        transform: rotateY(82.5deg) translateZ(154px);
}

.side:nth-of-type(24) {
	background-position: 739.125px 0; 
	-webkit-transform: rotateY(86.25deg) translateZ(154px);
	   -moz-transform: rotateY(86.25deg) translateZ(154px);
	        transform: rotateY(86.25deg) translateZ(154px);
}

.side:nth-of-type(25) {
	background-position: 729px 0; 
	-webkit-transform: rotateY(90deg) translateZ(154px);
	   -moz-transform: rotateY(90deg) translateZ(154px);
	        transform: rotateY(90deg) translateZ(154px);
}

.side:nth-of-type(26) {
	background-position: 718.875px 0; 
	-webkit-transform: rotateY(93.75deg) translateZ(154px);
	   -moz-transform: rotateY(93.75deg) translateZ(154px);
	        transform: rotateY(93.75deg) translateZ(154px);
}

.side:nth-of-type(27) {
	background-position: 708.75px 0; 
	-webkit-transform: rotateY(97.5deg) translateZ(154px);
	   -moz-transform: rotateY(97.5deg) translateZ(154px);
	        transform: rotateY(97.5deg) translateZ(154px);
}

.side:nth-of-type(28) {
	background-position: 698.625px 0; 
	-webkit-transform: rotateY(101.25deg) translateZ(154px);
	   -moz-transform: rotateY(101.25deg) translateZ(154px);
	        transform: rotateY(101.25deg) translateZ(154px);
}

.side:nth-of-type(29) {
	background-position: 688.5px 0; 
	-webkit-transform: rotateY(105deg) translateZ(154px);
	   -moz-transform: rotateY(105deg) translateZ(154px);
	        transform: rotateY(105deg) translateZ(154px);
}

.side:nth-of-type(30) {
	background-position: 678.375px 0; 
	-webkit-transform: rotateY(108.75deg) translateZ(154px);
	   -moz-transform: rotateY(108.75deg) translateZ(154px);
	        transform: rotateY(108.75deg) translateZ(154px);
}

.side:nth-of-type(31) {
	background-position: 668.25px 0; 
	-webkit-transform: rotateY(112.5deg) translateZ(154px);
	   -moz-transform: rotateY(112.5deg) translateZ(154px);
	        transform: rotateY(112.5deg) translateZ(154px);
}

.side:nth-of-type(32) {
	background-position: 658.125px 0; 
	-webkit-transform: rotateY(116.25deg) translateZ(154px);
	   -moz-transform: rotateY(116.25deg) translateZ(154px);
	        transform: rotateY(116.25deg) translateZ(154px);
}

.side:nth-of-type(33) {
	background-position: 648px 0; 
	-webkit-transform: rotateY(120deg) translateZ(154px);
	   -moz-transform: rotateY(120deg) translateZ(154px);
	        transform: rotateY(120deg) translateZ(154px);
}

.side:nth-of-type(34) {
	background-position: 637.875px 0; 
	-webkit-transform: rotateY(123.75deg) translateZ(154px);
	   -moz-transform: rotateY(123.75deg) translateZ(154px);
	        transform: rotateY(123.75deg) translateZ(154px);
}

.side:nth-of-type(35) {
	background-position: 627.75px 0; 
	-webkit-transform: rotateY(127.5deg) translateZ(154px);
	   -moz-transform: rotateY(127.5deg) translateZ(154px);
	        transform: rotateY(127.5deg) translateZ(154px);
}

.side:nth-of-type(36) {
	background-position: 617.625px 0; 
	-webkit-transform: rotateY(131.25deg) translateZ(154px);
	   -moz-transform: rotateY(131.25deg) translateZ(154px);
	        transform: rotateY(131.25deg) translateZ(154px);
}

.side:nth-of-type(37) {
	background-position: 607.5px 0; 
	-webkit-transform: rotateY(135deg) translateZ(154px);
	   -moz-transform: rotateY(135deg) translateZ(154px);
	        transform: rotateY(135deg) translateZ(154px);
}

.side:nth-of-type(38) {
	background-position: 597.375px 0; 
	-webkit-transform: rotateY(138.75deg) translateZ(154px);
	   -moz-transform: rotateY(138.75deg) translateZ(154px);
	        transform: rotateY(138.75deg) translateZ(154px);
}

.side:nth-of-type(39) {
	background-position: 587.25px 0; 
	-webkit-transform: rotateY(142.5deg) translateZ(154px);
	   -moz-transform: rotateY(142.5deg) translateZ(154px);
	        transform: rotateY(142.5deg) translateZ(154px);
}

.side:nth-of-type(40) {
	background-position: 577.125px 0; 
	-webkit-transform: rotateY(146.25deg) translateZ(154px);
	   -moz-transform: rotateY(146.25deg) translateZ(154px);
	        transform: rotateY(146.25deg) translateZ(154px);
}

.side:nth-of-type(41) {
	background-position: 567px 0; 
	-webkit-transform: rotateY(150deg) translateZ(154px);
	   -moz-transform: rotateY(150deg) translateZ(154px);
	        transform: rotateY(150deg) translateZ(154px);
}

.side:nth-of-type(42) {
	background-position: 556.875px 0; 
	-webkit-transform: rotateY(153.75deg) translateZ(154px);
	   -moz-transform: rotateY(153.75deg) translateZ(154px);
	        transform: rotateY(153.75deg) translateZ(154px);
}

.side:nth-of-type(43) {
	background-position: 546.75px 0; 
	-webkit-transform: rotateY(157.5deg) translateZ(154px);
	   -moz-transform: rotateY(157.5deg) translateZ(154px);
	        transform: rotateY(157.5deg) translateZ(154px);
}

.side:nth-of-type(44) {
	background-position: 536.625px 0; 
	-webkit-transform: rotateY(161.25deg) translateZ(154px);
	   -moz-transform: rotateY(161.25deg) translateZ(154px);
	        transform: rotateY(161.25deg) translateZ(154px);
}

.side:nth-of-type(45) {
	background-position: 526.5px 0; 
	-webkit-transform: rotateY(165deg) translateZ(154px);
	   -moz-transform: rotateY(165deg) translateZ(154px);
	        transform: rotateY(165deg) translateZ(154px);
}

.side:nth-of-type(46) {
	background-position: 516.375px 0; 
	-webkit-transform: rotateY(168.75deg) translateZ(154px);
	   -moz-transform: rotateY(168.75deg) translateZ(154px);
	        transform: rotateY(168.75deg) translateZ(154px);
}

.side:nth-of-type(47) {
	background-position: 506.25px 0; 
	-webkit-transform: rotateY(172.5deg) translateZ(154px);
	   -moz-transform: rotateY(172.5deg) translateZ(154px);
	        transform: rotateY(172.5deg) translateZ(154px);
}

.side:nth-of-type(48) {
	background-position: 496.125px 0; 
	-webkit-transform: rotateY(176.25deg) translateZ(154px);
	   -moz-transform: rotateY(176.25deg) translateZ(154px);
	        transform: rotateY(176.25deg) translateZ(154px);
}

.side:nth-of-type(49) {
	background-position: 486px 0; 
	-webkit-transform: rotateY(180deg) translateZ(154px);
	   -moz-transform: rotateY(180deg) translateZ(154px);
	        transform: rotateY(180deg) translateZ(154px);
}

.side:nth-of-type(50) {
	background-position: 475.875px 0; 
	-webkit-transform: rotateY(183.75deg) translateZ(154px);
	   -moz-transform: rotateY(183.75deg) translateZ(154px);
	        transform: rotateY(183.75deg) translateZ(154px);
}

.side:nth-of-type(51) {
	background-position: 465.75px 0; 
	-webkit-transform: rotateY(187.5deg) translateZ(154px);
	   -moz-transform: rotateY(187.5deg) translateZ(154px);
	        transform: rotateY(187.5deg) translateZ(154px);
}

.side:nth-of-type(52) {
	background-position: 455.625px 0; 
	-webkit-transform: rotateY(191.25deg) translateZ(154px);
	   -moz-transform: rotateY(191.25deg) translateZ(154px);
	        transform: rotateY(191.25deg) translateZ(154px);
}

.side:nth-of-type(53) {
	background-position: 445.5px 0; 
	-webkit-transform: rotateY(195deg) translateZ(154px);
	   -moz-transform: rotateY(195deg) translateZ(154px);
	        transform: rotateY(195deg) translateZ(154px);
}

.side:nth-of-type(54) {
	background-position: 435.375px 0; 
	-webkit-transform: rotateY(198.75deg) translateZ(154px);
	   -moz-transform: rotateY(198.75deg) translateZ(154px);
	        transform: rotateY(198.75deg) translateZ(154px);
}

.side:nth-of-type(55) {
	background-position: 425.25px 0; 
	-webkit-transform: rotateY(202.5deg) translateZ(154px);
	   -moz-transform: rotateY(202.5deg) translateZ(154px);
	        transform: rotateY(202.5deg) translateZ(154px);
}

.side:nth-of-type(56) {
	background-position: 415.125px 0; 
	-webkit-transform: rotateY(206.25deg) translateZ(154px);
	   -moz-transform: rotateY(206.25deg) translateZ(154px);
	        transform: rotateY(206.25deg) translateZ(154px);
}

.side:nth-of-type(57) {
	background-position: 405px 0; 
	-webkit-transform: rotateY(210deg) translateZ(154px);
	   -moz-transform: rotateY(210deg) translateZ(154px);
	        transform: rotateY(210deg) translateZ(154px);
}

.side:nth-of-type(58) {
	background-position: 394.875px 0; 
	-webkit-transform: rotateY(213.75deg) translateZ(154px);
	   -moz-transform: rotateY(213.75deg) translateZ(154px);
	        transform: rotateY(213.75deg) translateZ(154px);
}

.side:nth-of-type(59) {
	background-position: 384.75px 0; 
	-webkit-transform: rotateY(217.5deg) translateZ(154px);
	   -moz-transform: rotateY(217.5deg) translateZ(154px);
	        transform: rotateY(217.5deg) translateZ(154px);
}

.side:nth-of-type(60) {
	background-position: 374.625px 0; 
	-webkit-transform: rotateY(221.25deg) translateZ(154px);
	   -moz-transform: rotateY(221.25deg) translateZ(154px);
	        transform: rotateY(221.25deg) translateZ(154px);
}

.side:nth-of-type(61) {
	background-position: 364.5px 0; 
	-webkit-transform: rotateY(225deg) translateZ(154px);
	   -moz-transform: rotateY(225deg) translateZ(154px);
	        transform: rotateY(225deg) translateZ(154px);
}

.side:nth-of-type(62) {
	background-position: 354.375px 0; 
	-webkit-transform: rotateY(228.75deg) translateZ(154px);
	   -moz-transform: rotateY(228.75deg) translateZ(154px);
	        transform: rotateY(228.75deg) translateZ(154px);
}

.side:nth-of-type(63) {
	background-position: 344.25px 0; 
	-webkit-transform: rotateY(232.5deg) translateZ(154px);
	   -moz-transform: rotateY(232.5deg) translateZ(154px);
	        transform: rotateY(232.5deg) translateZ(154px);
}

.side:nth-of-type(64) {
	background-position: 334.125px 0; 
	-webkit-transform: rotateY(236.25deg) translateZ(154px);
	   -moz-transform: rotateY(236.25deg) translateZ(154px);
	        transform: rotateY(236.25deg) translateZ(154px);
}

.side:nth-of-type(65) {
	background-position: 324px 0; 
	-webkit-transform: rotateY(240deg) translateZ(154px);
	   -moz-transform: rotateY(240deg) translateZ(154px);
	        transform: rotateY(240deg) translateZ(154px);
}

.side:nth-of-type(66) {
	background-position: 313.875px 0; 
	-webkit-transform: rotateY(243.75deg) translateZ(154px);
	   -moz-transform: rotateY(243.75deg) translateZ(154px);
	        transform: rotateY(243.75deg) translateZ(154px);
}

.side:nth-of-type(67) {
	background-position: 303.75px 0; 
	-webkit-transform: rotateY(247.5deg) translateZ(154px);
	   -moz-transform: rotateY(247.5deg) translateZ(154px);
	        transform: rotateY(247.5deg) translateZ(154px);
}

.side:nth-of-type(68) {
	background-position: 293.625px 0; 
	-webkit-transform: rotateY(251.25deg) translateZ(154px);
	   -moz-transform: rotateY(251.25deg) translateZ(154px);
	        transform: rotateY(251.25deg) translateZ(154px);
}

.side:nth-of-type(69) {
	background-position: 283.5px 0; 
	-webkit-transform: rotateY(255deg) translateZ(154px);
	   -moz-transform: rotateY(255deg) translateZ(154px);
	        transform: rotateY(255deg) translateZ(154px);
}

.side:nth-of-type(70) {
	background-position: 273.375px 0; 
	-webkit-transform: rotateY(258.75deg) translateZ(154px);
	   -moz-transform: rotateY(258.75deg) translateZ(154px);
	        transform: rotateY(258.75deg) translateZ(154px);
}

.side:nth-of-type(71) {
	background-position: 263.25px 0; 
	-webkit-transform: rotateY(262.5deg) translateZ(154px);
	   -moz-transform: rotateY(262.5deg) translateZ(154px);
	        transform: rotateY(262.5deg) translateZ(154px);
}

.side:nth-of-type(72) {
	background-position: 253.125px 0; 
	-webkit-transform: rotateY(266.25deg) translateZ(154px);
	   -moz-transform: rotateY(266.25deg) translateZ(154px);
	        transform: rotateY(266.25deg) translateZ(154px);
}

.side:nth-of-type(73) {
	background-position: 243px 0; 
	-webkit-transform: rotateY(270deg) translateZ(154px);
	   -moz-transform: rotateY(270deg) translateZ(154px);
	        transform: rotateY(270deg) translateZ(154px);
}

.side:nth-of-type(74) {
	background-position: 232.875px 0; 
	-webkit-transform: rotateY(273.75deg) translateZ(154px);
	   -moz-transform: rotateY(273.75deg) translateZ(154px);
	        transform: rotateY(273.75deg) translateZ(154px);
}

.side:nth-of-type(75) {
	background-position: 222.75px 0; 
	-webkit-transform: rotateY(277.5deg) translateZ(154px);
	   -moz-transform: rotateY(277.5deg) translateZ(154px);
	        transform: rotateY(277.5deg) translateZ(154px);
}

.side:nth-of-type(76) {
	background-position: 212.625px 0; 
	-webkit-transform: rotateY(281.25deg) translateZ(154px);
	   -moz-transform: rotateY(281.25deg) translateZ(154px);
	        transform: rotateY(281.25deg) translateZ(154px);
}

.side:nth-of-type(77) {
	background-position: 202.5px 0; 
	-webkit-transform: rotateY(285deg) translateZ(154px);
	   -moz-transform: rotateY(285deg) translateZ(154px);
	        transform: rotateY(285deg) translateZ(154px);
}

.side:nth-of-type(78) {
	background-position: 192.375px 0; 
	-webkit-transform: rotateY(288.75deg) translateZ(154px);
	   -moz-transform: rotateY(288.75deg) translateZ(154px);
	        transform: rotateY(288.75deg) translateZ(154px);
}

.side:nth-of-type(79) {
	background-position: 182.25px 0; 
	-webkit-transform: rotateY(292.5deg) translateZ(154px);
	   -moz-transform: rotateY(292.5deg) translateZ(154px);
	        transform: rotateY(292.5deg) translateZ(154px);
}

.side:nth-of-type(80) {
	background-position: 172.125px 0; 
	-webkit-transform: rotateY(296.25deg) translateZ(154px);
	   -moz-transform: rotateY(296.25deg) translateZ(154px);
	        transform: rotateY(296.25deg) translateZ(154px);
}

.side:nth-of-type(81) {
	background-position: 162px 0; 
	-webkit-transform: rotateY(300deg) translateZ(154px);
	   -moz-transform: rotateY(300deg) translateZ(154px);
	        transform: rotateY(300deg) translateZ(154px);
}

.side:nth-of-type(82) {
	background-position: 151.875px 0; 
	-webkit-transform: rotateY(303.75deg) translateZ(154px);
	   -moz-transform: rotateY(303.75deg) translateZ(154px);
	        transform: rotateY(303.75deg) translateZ(154px);
}

.side:nth-of-type(83) {
	background-position: 141.75px 0; 
	-webkit-transform: rotateY(307.5deg) translateZ(154px);
	   -moz-transform: rotateY(307.5deg) translateZ(154px);
	        transform: rotateY(307.5deg) translateZ(154px);
}

.side:nth-of-type(84) {
	background-position: 131.625px 0; 
	-webkit-transform: rotateY(311.25deg) translateZ(154px);
	   -moz-transform: rotateY(311.25deg) translateZ(154px);
	        transform: rotateY(311.25deg) translateZ(154px);
}

.side:nth-of-type(85) {
	background-position: 121.5px 0; 
	-webkit-transform: rotateY(315deg) translateZ(154px);
	   -moz-transform: rotateY(315deg) translateZ(154px);
	        transform: rotateY(315deg) translateZ(154px);
}

.side:nth-of-type(86) {
	background-position: 111.375px 0; 
	-webkit-transform: rotateY(318.75deg) translateZ(154px);
	   -moz-transform: rotateY(318.75deg) translateZ(154px);
	        transform: rotateY(318.75deg) translateZ(154px);
}

.side:nth-of-type(87) {
	background-position: 101.25px 0; 
	-webkit-transform: rotateY(322.5deg) translateZ(154px);
	   -moz-transform: rotateY(322.5deg) translateZ(154px);
	        transform: rotateY(322.5deg) translateZ(154px);
}

.side:nth-of-type(88) {
	background-position: 91.125px 0; 
	-webkit-transform: rotateY(326.25deg) translateZ(154px);
	   -moz-transform: rotateY(326.25deg) translateZ(154px);
	        transform: rotateY(326.25deg) translateZ(154px);
}

.side:nth-of-type(89) {
	background-position: 81px 0; 
	-webkit-transform: rotateY(330deg) translateZ(154px);
	   -moz-transform: rotateY(330deg) translateZ(154px);
	        transform: rotateY(330deg) translateZ(154px);
}

.side:nth-of-type(90) {
	background-position: 70.875px 0; 
	-webkit-transform: rotateY(333.75deg) translateZ(154px);
	   -moz-transform: rotateY(333.75deg) translateZ(154px);
	        transform: rotateY(333.75deg) translateZ(154px);
}

.side:nth-of-type(91) {
	background-position: 60.75px 0; 
	-webkit-transform: rotateY(337.5deg) translateZ(154px);
	   -moz-transform: rotateY(337.5deg) translateZ(154px);
	        transform: rotateY(337.5deg) translateZ(154px);
}

.side:nth-of-type(92) {
	background-position: 50.625px 0; 
	-webkit-transform: rotateY(341.25deg) translateZ(154px);
	   -moz-transform: rotateY(341.25deg) translateZ(154px);
	        transform: rotateY(341.25deg) translateZ(154px);
}

.side:nth-of-type(93) {
	background-position: 40.5px 0; 
	-webkit-transform: rotateY(345deg) translateZ(154px);
	   -moz-transform: rotateY(345deg) translateZ(154px);
	        transform: rotateY(345deg) translateZ(154px);
}

.side:nth-of-type(94) {
	background-position: 30.375px 0; 
	-webkit-transform: rotateY(348.75deg) translateZ(154px);
	   -moz-transform: rotateY(348.75deg) translateZ(154px);
	        transform: rotateY(348.75deg) translateZ(154px);
}

.side:nth-of-type(95) {
	background-position: 20.25px 0; 
	-webkit-transform: rotateY(352.5deg) translateZ(154px);
	   -moz-transform: rotateY(352.5deg) translateZ(154px);
	        transform: rotateY(352.5deg) translateZ(154px);
}

.side:nth-of-type(96) {
	background-position: 10.125px 0; 
	-webkit-transform: rotateY(356.25deg) translateZ(154px);
	   -moz-transform: rotateY(356.25deg) translateZ(154px);
	        transform: rotateY(356.25deg) translateZ(154px);
}

              
            
!

JS

              
                
              
            
!
999px

Console