What is the relationship between Perspective, translateZ, rotate3d and no. of persons

Question

I refer to this post for 3D transforms.

So, I am trying to set the dynamic property .containerdynamically so that adjacent faces are displayed perpendicular to the front face, as shown in the figure below with green lines.

Associated Code

.container {
  width: 210px;
  height: 140px;
  position: relative;
  perspective: 1000px;
}

#carousel {
  width: 100%;
  height: 100%;
  position: absolute;
  transform-style: preserve-3d;
  transform: translateZ( -288px ) rotateY( -160deg );
}

#carousel figure {
  margin: 0;
  display: block;
  position: absolute;
  width: 186px;
  height: 116px;
  left: 10px;
  top: 10px;
  border: 2px solid black;
}

I tried with various combinations, but it was partially correct, since it worked with either a small number of faces or a large number of faces. I know for sure that the value of perspective is inversely proportional to the absence of faces.

perspectiveValue = translateZValue/noOfFaces;
perspectiveValue = translateZValue*rotationAngle/noOfFaces;

Please let me know if anyone knows about the connection between perspective, translateZ, rotate3d and no. faces. Thanks.

Answer 1

.

, ,

105 px * cos (40deg) = 80 px

, , .

105 px * tan (40deg) = 88 px

() , . ( ). , (), ( ) - "". .

, - :

(, )

Beatiful , , vinayakj