Here’s yet another old school project – the rotation of a simulated 3-D object. All source materials are included.
• As Hype does not support a true 3-D space, items do not intersect, but overlap. For the inner angles of the fireplace to work I edited the inner top to a trapezoid so it would provide the illusion of intersection.
• Also due to limitations (the inability to offset the anchor point on the z axis), objects such as the back wall could not rotate around a floating anchor point without adding some complexity. The easy solution is to shift the item horizontally as it rotates.
• To reduce the impression of a rigid animation, the main timeline is set to a 8-second loop, but the flames and embers are on a separate timeline with a 6.5 second loop.
• There is a parallax effect going on between the fireplace front, the wood, and the back wall. The trick is in moving the wood element horizontally, but only slightly. The greater the move, the greater the perceived distance. (This is opposite of the normal parallax effect because the “universe” is rotating around a center point rather than around a distant vanishing point.)
• The seamless intersection of the outer faces of the fireplace was done by slicing the original flat image. Added depth was created by using Hype’s CSS tools to darken the left face and brighten the right face. To achieve a seamless look, the right and left faces were nudged one pixel towards the center.
• No effort has been made to optimize the dimensions or file sizes, so you can use the elements to create a larger version if you wish.
BTW, I would have saved a preview as a GIF but Hype was unable to complete the output.