﻿.box1 {
	position: absolute;
	width: 200px;
	height: 200px;
 -webkit-perspective: 2000px;
 perspective: 2000px;

-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;
transform: translateZ(-550px);
-webkit-transform: translateZ(-550px);
}





.box1 div {
	position: absolute;
	width: 200px;
	height: 200px;
  text-align:center;
  line-height:200px;

  transform-origin: 50% 50% -140px;
  -webkit-transform-origin: 50% 50% -140px;
-webkit-backface-visibility: visible;
  -ms-backface-visibility: visible;
backface-visibility: visible;
opacity: 0.95; filter: alpha(opacity=95);
  cursor: default;


}

.box1 .bok1 {
	background: rgba(  0, 0, 0, 0 );
	-webkit-animation: animate1 12s infinite linear;
	animation: animate1 12s infinite linear;
}

.box1 .bok2 {
	background: rgba(  0, 0, 0, 0 );
	-webkit-animation: animate2 12s infinite linear;
	animation: animate2 12s infinite linear;
}



.box1 .bok4 {
	background: rgba(  0, 0, 0, 0 );
	-webkit-animation: animate4 12s infinite linear;
	animation: animate4 12s infinite linear;
}



.box1 .bok6 {
	background: rgba(  0, 0, 0, 0 );
	animation: animate6 12s infinite linear;
	-webkit-animation: animate6 12s infinite linear;
}

/* for Chrome and Chrome */
@-webkit-keyframes animate1 {
0% {
-webkit-transform: perspective(600px) rotateX(0deg) rotateY(450deg) rotateZ(0deg);
}
100% {
-webkit-transform: perspective(600px) rotateX(0deg) rotateY(90deg) rotateZ(0deg);
}
}
@-webkit-keyframes animate2 {
0% {
-webkit-transform:perspective(600px) rotateX(0deg) rotateY(630deg) rotateZ(0deg);
}
100% {
-webkit-transform:perspective(600px) rotateX(0deg) rotateY(270deg) rotateZ(0deg);
}
}

@-webkit-keyframes animate4 {
0% {
-webkit-transform:perspective(600px) rotateX(0deg) rotateY(360deg) rotateZ(0deg);
}
100% {
-webkit-transform:perspective(600px) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
}
}
@-webkit-keyframes animate6 {
0% {
-webkit-transform:perspective(600px) rotateX(0deg) rotateY(540deg) rotateZ(0deg);
}
100% {
-webkit-transform:perspective(600px) rotateX(0deg) rotateY(180deg) rotateZ(0deg);
}
}

/* for Firefox and IE10 */
@keyframes animate1 {
0% {
transform: perspective(600px) rotateX(0deg) rotateY(450deg) rotateZ(0deg);
}
100% {
transform: perspective(600px) rotateX(0deg) rotateY(90deg) rotateZ(0deg);
}
}
@keyframes animate2 {
0% {
transform:perspective(600px) rotateX(0deg) rotateY(630deg) rotateZ(0deg);
}
100% {
transform:perspective(600px) rotateX(0deg) rotateY(270deg) rotateZ(0deg);
}
}

@keyframes animate4 {
0% {
transform:perspective(600px) rotateX(0deg) rotateY(360deg) rotateZ(0deg);
}
100% {
transform:perspective(600px) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
}
}
@keyframes animate6 {
0% {
transform:perspective(600px) rotateX(0deg) rotateY(540deg) rotateZ(0deg);
}
100% {
transform:perspective(600px) rotateX(0deg) rotateY(180deg) rotateZ(0deg);
}
}



#obroty {
		-webkit-animation: rotation 15s infinite linear;
			animation: rotation 15s infinite linear;
}

@-webkit-keyframes rotation {
		from {
				-webkit-transform: rotate(0deg);
		}
		to {
				-webkit-transform: rotate(359deg);
		}
}

/* for Firefox and IE10 */
@keyframes rotation {
		from {
				transform: rotate(0deg);
		}
		to {
				transform: rotate(359deg);
		}
}





