css как высчитывается perspective?

@keyframes _img{ 
0%{ 
-webkit-transform:rotateX(-360deg) translateZ(100px) rotateX(360deg); 
transform:rotateX(-360deg) translateZ(100px) rotateX(360deg); 
} 
100%{ 
-webkit-transform:rotateX(0deg) translateZ(100px) rotateX(0deg); 
transform:rotateX(0deg) translateZ(100px) rotateX(0deg); 
} 
} 
div 
{  
border:1px solid hsla(0,0%,100%,1); 
display:block; 
position: relative; 
width:calc(60vw); 
height:calc(20vw); 
margin:0% auto; 
background:hsla(0,0%,60%,1); 
box-shadow:inset .75em .75em .75em hsla(0,0%,100%,1),inset -.75em -.75em .75em hsla(0,0%,100%,1); 
perspective:700px; 
transform-style:preserve-3d; 
transition:all 1s linear 0s; 
} 
img { 
border-radius: 50%; 
border:1px solid hsla(0,0%,60%,1); 
position:absolute; 
width:calc(8vw); 
height:calc(8vw); 
top:calc(100%/3 - 3%); 
left:calc(100%/2 - 10%); 
-webkit-filter: drop-shadow(0px 0px 40px  hsla(70,80%,40%,1)); 
-webkit-transform:rotateX(0deg) translateZ(160px) rotateX(0deg); 
filter: drop-shadow(0px 0px 40px  hsla(70,80%,40%,1)); 
transform:rotateX(0deg) translateZ(160px) rotateX(0deg); 
} 
div:hover img{ 
 animation:_img 3s infinite linear; 
}

<div > 
		<img src="http://i.imgur.com/3DWAbmN.jpg" /> 
</div>

div 
{ 
margin:0;  
padding:0; 
border:1px solid hsla(0,0%,100%,1); 
display: inline-block; 
position: relative; 
width:calc(28vw); 
height:calc(28vw); 
background:transparent; 
perspective:700px; 
transform-style:preserve-3d; 
} 
.str{ 
	position:absolute; 
	top:calc(100%/4 - 1%); 
	left:calc(100%/2 - 10%); 
  width: 0px; 
  height:calc(5vw); 
  border-left:calc(5vw) solid black; 
  border-top:calc(5vw) solid transparent; 
  border-bottom:calc(5vw) solid transparent; 
  border-right: transparent; 
  background: transparent; 
  transform: rotateX(0deg) translateZ(110px); 
  transition:transform 2s; 
} 
 
div:hover .str{ 
transform: rotateX(360deg) translateZ(110px); 
} 
 
.str_1{ 
	position:absolute; 
	top:calc(100%/4 - 1%); 
	left:calc(100%/2 - 10%); 
  width: 0px; 
  height:calc(5vw); 
  border-left:calc(5vw) solid black; 
  border-top:calc(5vw) solid transparent; 
  border-bottom:calc(5vw) solid transparent; 
  border-right: transparent; 
  background: transparent; 
  transform: rotateY(0deg) translateZ(110px); 
  transition:transform 2s; 
} 
 
div:hover .str_1{ 
transform: rotateY(360deg) translateZ(110px); 
} 
 
.str_3{ 
	position:absolute; 
	top:calc(100%/4 - 1%); 
	left:calc(100%/2 - 10%); 
  width: 0px; 
  height:calc(5vw); 
  border-left:calc(5vw) solid black; 
  border-top:calc(5vw) solid transparent; 
  border-bottom:calc(5vw) solid transparent; 
  border-right: transparent; 
  background: transparent; 
  transform:  skewY(0deg) translate(0px) ; 
  transition:transform 2s; 
} 
 
div:hover .str_3{ 
transform:  skewY(360deg) translate(10px); 
}

<div> 
		<div class="str"></div> 
</div> 
<div> 
		<div class="str_1"></div> 
</div> 
<div> 
		<div class="str_3"></div> 
</div>