3d cubes By Gaurav Khurana using CSS3

Creating 3D cube with pure CSS3
By
Gaurav Khurana
email at khurana.g@hotmail.com 1

Getting Started
• Let me start with a markup.
• We need a container (we will require another parent
container which I will cover shortly)
• And each div for all sides (front, back, left, right, top,
bottom)

Explaining Markup
• We require container which will act as a cube so that
we can rotate it. I will call it cube here on.
• We would require transition property on this cube to
give some animation.
• Moreover, we need to give transform-style :
preserve-3d I will explain later on why we need this.
• For each sides of the cube we have each container
with respective class “front, back, left, right, top,
bottom” respectively.

Lets start with our CSS now
• I will be inserting images to all faces/sides of
cubes and they are of dimension 154 x 154px.
• We will give width and height to cube as
154px.
• Each cube face will have width and height
inherit.
• We will now give position relative to cube and
position absolute to each side/face so they
stack upon each other at one place.

CSS code

CSS code for each face/side

Result so far
• The image you are seeing is of last face/side
i.e. bottom in our case image name “6.jpg”.
My
beautiful
girlfriend

Lets focus back on code
• Lets add some 3d concept now.
• To bring the cube closer to eyes we translate it
to Z-axis.

Result
Not much of a difference? lets see why?

Perspective in CSS
• To activate 3D space, an element needs
perspective. This can be achieved by two
ways.
– Using transform property with the perspective as
functional notation.
– Using perspective property.

Understanding Perspective

Result of both ways
Perspective
property
applied on
parent
Perspective
Functional
notation
applied on
element

Lets see the difference
• These two formats both trigger a 3-D space, but
there is a difference.
• First functional notation is conventional way of
applying 3-D transform on a single element.
• But when applied on multiple element transformed
element don’t line up as expected. Lets see the
difference

Perspective: Property vs Functional
Notation
Perspective
Functional
notation to each
element
Perspective
property to parent
element

Something important about
Perspective
• The value of perspective determines the intensity of
3-D effect.
• Think of it as a distance from the viewer to the
object.
• The greater the value, the further the distance, so
the less intense the visual effect. perspective: 2000;
yields a subtle 3-D effect, as if we were viewing an
object from far away. perspective: 100; produces a
tremendous 3-D effect, like a tiny insect viewing a
massive object.

Lets get back to our code
• So as we observed it is good idea to use perspective
property on parent element when dealing with
multiple child element for 3-D transform.

Result
• No change
Looks like she
wants front seat.
Girls I tell you
how adamant
they are 

Why no change?
• Even after we give perspective to our scene, we still
have an issue. The front face should ideally appear
above all other faces, hiding them behind it. But it's
not.
• When we create html element z-index get associated
with each element and the stacking order determine
least element should be given higher z-index.

Lets fix this now
• Without an element having the transform-style
property set as preserve-3d, its children are rendered
as flattened, having no stacking context.
• Thus even when we bought the front face closer on
Z-axis, it continued to render it at its original z-index
with no consideration to its position in the 3D space.

Result
• No change
GOD
You gotta be
kidding me

What’s wrong now?
• Well don’t worry we have our 3-D system setup now.
Lets work on positioning.
• One face at a time. Lets begin with front face.

Explaining cordinates
• As you can see, the Z-axis
is coming out of the
screen straight from the
element.
• Hence, when we translate
the front face positively
on the Z-axis, it appears
closer to us.
• A point to note here is
that this coordinate
system is local to this
element. Let's look at that
more closely.

• We'll use our front face
again and rotate it a bit
about its Y-axis.
• As you see axis rotated
along with element.
• Z-axis no longer coming
straight towards us

Lets understand one more face/side
Left face now Left face after rotation
90 deg (vertically so
rotate Y)

Our position is complete now
Nothing to
rotate here.
Simple move
the front face
forward by half
the cube's
length.

Result
Finally, but
she still hold
on to front by
sharing the
seat :D

Lets add a logic to rotate
• We will use arrow keys to rotate our cube.

Now use left arrow key to rotate left
• Notice Something wrong?
• When we press left arrow key,
we should see right face in front.
• We do see it but it is in smaller size.

Fixing Perspective.
• If you remember we gave perspective property to
cube container.
• And when we rotated that element just now, the
perspective marked by the vanishing point also
rotated along with it.
• So the vanishing point which was initially somewhere
behind the 2D place came in front of the 2D plane
after the rotation, causing the issue.

What we want?
• What we ideally want is that the perspective never
changes and remains constant no matter what
element we transform.
• How do we fix this? We wrap all our elements with
another DIV to which give the perspective property:

Lets get back to our code
• So as we observed it is good idea to use perspective
property on parent element when dealing with
multiple child element for 3-D transform.
Added parent to Markup
Added css perspective to parent

Result
Need code?

Link to code
https://drive.google.com/file/d/0B2qTHtNDrsw
mbDJrR3R6Nkx0dU0/view?usp=sharing

3d cubes By Gaurav Khurana using CSS3

More Related Content

Viewers also liked

Similar to 3d cubes By Gaurav Khurana using CSS3

Recently uploaded

3d cubes By Gaurav Khurana using CSS3