This demo explores how to place several objects within the same 3D space. Set the perspective size of the outer object using the web form. To pass the perspective value from the outer object to the inner object, set the transform-style to preserve-3d. To put the outer and inner objects within their own perspective spaces, change the value of the transform-style to flat.

You can place the perspective value as a function value within the transform property which applies the perspective value to the outer object and passes it along to the inner object. If you set the perspective value in the perspective property it will simply be passed to the inner object.

To see the impact of the outer and inner objects residing in the same 3D space, set the perspective value as a function and change the transform-style value to preserve-3d and then rotate both objects separately; then compare the result to a transform-style which is set to flat.