@charset "utf-8";
*{
	user-select: none;
}
/*body,html*/
body,html{
	margin: 0;padding: 0;
	background:  url(../img/testImg-01.jpg) 0 0 no-repeat;
	background-size: cover;
	height: 100%;
	min-height: 600px;
	overflow: hidden;
}
/*box*/
.square-perspective-box{
	width: 320px;height: 320px;
	transform-style: preserve-3d;
	position: absolute;
	top: 50%;left: 50%;
	margin-left: -160px;margin-top: -160px;
	animation: move 10s linear infinite;
}
.square-perspective-box:hover .square-box-front,
.square-perspective-box:hover .square-box-behind,
.square-perspective-box:hover .square-box-top,
.square-perspective-box:hover .square-box-bottom,
.square-perspective-box:hover .square-box-left,
.square-perspective-box:hover .square-box-right {
	border-radius: 50%;
	opacity: 1;
	border: 10px solid #fff;
	box-shadow: 0 0 15px rgba(70, 214, 240, 0.61);
}
.square-perspective-box:hover .square-box-front{
	transform: translateZ(220px) scale(0.71);
}
.square-perspective-box:hover .square-box-behind{
	transform: translateZ(-220px) scale(0.71);
}
.square-perspective-box:hover .square-box-top{
	transform: rotateX(60deg) translateZ(220px) translateY(0px) scale(0.71);
}
.square-perspective-box:hover .square-box-bottom{
	transform: rotateY(60deg) translateZ(-220px) translateX(0px) scale(0.71);
}
.square-perspective-box:hover .square-box-left{
	transform: rotateX(-60deg) translateZ(220px) translateY(0px) scale(0.71);
}
.square-perspective-box:hover .square-box-right{
	transform: rotateY(-60deg) translateZ(-220px) translateX(0px) scale(0.71);
}
.square-box-front,.square-box-behind,.square-box-top,.square-box-right,.square-box-bottom,.square-box-left{
	width: 100%;height: 100%;
	position: absolute;
	opacity: 0.6;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	transition: 0.6s cubic-bezier(.28, .59, .32, .99);
}
.square-box-front {
	background-image: url(../img/1.jpg);
	transform: translateZ(160px);
}
.square-box-behind {
	background-image: url(../img/11.jpg);
	transform: translateZ(-160px);
}
.square-box-top {
	background-image: url(../img/121.jpg);
	transform: rotateX(90deg) translateZ(160px);
}
.square-box-right {
	background-image: url(../img/123.jpg);
	transform: rotateY(90deg) translateZ(160px);
}
.square-box-bottom {
	background-image: url(../img/15_avatar_middle.jpg);
	transform: rotateX(-90deg) translateZ(160px);
}
.square-box-left {
	background-image: url(../img/16_avatar_big.jpg);
	transform: rotateY(-90deg) translateZ(160px);
}
@keyframes move{
	from{
		transform: rotateX(45deg) rotateY(60deg) rotateZ(0deg);
	}to{
		transform: rotateX(45deg) rotateY(270deg) rotateZ(360deg);
	}
}