Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS CSS Transitions and Transforms Adding 3D Effects with CSS Build a Rotating 3D Cube

Andrew Whatmore
seal-mask
.a{fill-rule:evenodd;}techdegree
Andrew Whatmore
Full Stack JavaScript Techdegree Student 8,971 Points
Posted by Andrew Whatmore
.a{fill-rule:evenodd;}techdegree
Andrew Whatmore
Full Stack JavaScript Techdegree Student 8,971 Points

Making cube responsive + changing the aspect ratio

There are a couple of questions I have in terms of how we can make this cube work for us in different situtations:

This tutorial uses hard-coded pixel values, meaning the cube:

  1. is not responsive ie does not adjust with screen width
  2. ties us to this particular aspect ratio

What is the best way to make the cube responsive? How would we go about eg replacing each pixel value in the tutorial with relative units?

  • Is there a formula for calculating the transform values in relation to the cube size if we use relative units?
  • Is there another way we could achieve a responsive cube?

How would we go about using a different aspect ratio for the cube?

  • Similarly, is there a formula for calculating the transform values based on the cube size we are using, that we can apply to different aspect ratios (including if we use relative units)?

Many thanks in advance,

Andrew