There are some things about 3D space that don't make sense to me.

I'm having trouble wrapping my head around some things. So we have the z axis when we give it a perspective, I can accept that. What about z-index? When things have a z-index and also being on the z-axis they get very muddled for me and possibly defy the laws of nature. Also, in this workspace I tried out a little thing where we would zoom out the perspective on hover, but it didn't end up looking realistic in terms of changing perspective. It looks more like they're being stretched than that we're zooming out. Should I be doing this differently, or are there just limitations on how well we can use CSS to do fancy 3D?

.content {
  perspective: 300px;  
  transition: perspective .3s;
}

.content:hover {
  perspective: 3000px;
}


.photo {
  transform: rotateY(55deg)  
}