Table of Contents
Challenge for today is quite interesting. We will practice some newer CSS features like 3D transforms and perspective. This challenge will test and stretch your knowledge of CSS to the limits. If you have any gaps here or there, I suggest you read something about properties involved in 3D CSS. It is a bit hard to explain how all this stuff works without burying you under thousands lines of text. However, I will at least try it. Let’s start …
Because CSS transforms belong to cutting-edge part of CSS modules and it is possible that it is not fully supported by older browsers (IE 8, 9 and Opera mini) we will include a -prefix-free JavaScript library that will take care about prefixing all necessary properties. I should mention that IE 10 and 11 offers only partial support to 3D transforms and don’t support “transform-style: preserve-3d” property at all, so this tutorial might not work in IE. Below are links to -prefix-free, live demo on Codepen and code repository on Github.
Resources:
-prefix-free:
http://leaverou.github.io/prefixfree/
Codepen live demo:
https://codepen.io/d3v3r0/pen/hozim
HTML
We will start by putting together basic HTML structure for this challenge. This will involve creating eight different div elements. First will have class “wrapper”, second will have class “box” and will be placed inside the previous one. “wrapper” div will be used to modify the perspective and “box” div will contain the sides. All the remaining div elements will be nested inside “box” div and they will have following classes – “front”, ”back”, ”top”, ”bottom”, ”left” and ”right”. These div elements will be individual sides of the box. Now, in case of HTML, we have all we need to create the box.
HTML:
<div class="wrapper"> <div class="box"> <div class="front"></div> <div class="back"></div> <div class="top"></div> <div class="bottom"></div> <div class="left"></div> <div class="right"></div> </div> </div>
CSS
HTML is done and now comes the funny part. First we will do is to select “wrapper” div and set its perspective to “600px” and perspective-origin to “50% 100px”. Perspective property says how far (in pixels) from view the element’s child elements are. Perspective-origin modifies the x and y coordinates of an element. Simply said it changes how the element is shown. The best way for you to understand these properties is to try different values and play with them so you can see the result on your own eyes.
CSS:
/*=Box=*/
.wrapper {
perspective: 600px;
perspective-origin: 50% 100px;
}
Now we will style the “box” div. It will require setting its position to “relative” (we will position each side to “absolute” later on). To center the box and add some space above and below set the margin to “3em auto” (top-bottom left-right). Width will be “200px”. Now we will set the transform property to “rotateY(-25deg)” and transform-style to “preserve-3d”. By modifying the “rotateY()” value you can rotate whole cube along the y-axis. You can add space and “rotateX()” value to rotate the cube also along the x-axis. The syntax then is “rotateY(deg) rotateX(deg)”. Today we will use only “rotateY()” value. transform-style set to “preserve-3d” is very important. Without it, all child elements (sides of box) would bu stacked on each other and you would see only one of them.
CSS:
.box {
position: relative;
margin: 3em auto;
width: 200px;
transform: rotateY(-25deg);
transform-style: preserve-3d;
}
Let’s now move to styling the sides. Select all of them simply by selecting “box” and all nested div elements. As said above, set the position to “absolute” and width and height properties to “200px”. Even though transparent box can be nice, we will rather put some color and shadow to be able to differentiate between individual sides. Background will be set to “rgba(255,255,255,.1)”. We used rgba to control the alpha channel – opacity. Let’s also add some effect through shadows. Set the box-shadow property to “inset 0 0 10px rgba(150,150,225,.85)”. Inset makes the shadow appear inside the element instead of outside. “0 0 10px” stands for “horizontal position vertical position blur”. The last value is for color of the shadow. As with background we used rgba to make the shadow semi-transparent.
CSS:
.box div {
position: absolute;
width: 200px;
height: 200px;
background: rgba(255,255,255,.1);
box-shadow: inset 0 0 10px rgba(150,150,225,.85);
}
First side to style will be the one on the back. This will require only one line of code and it will compose of transform property set to “translateZ(-100px) rotateY(180deg)”. This will move (translate) the element on z-axis and also rotate it along y-axis.
CSS:
.back { transform: translateZ(-100px) rotateY(180deg); }
Next side will be right. Again, we will set the transform property, but set it to “rotateY(-270) translateX(100px)”. This will rotate the element along y-axis for -270 degrees and move it on x-axis for 100px further from the screen. We will also set the transform-origin to “top right”.
CSS:
.right {
transform: rotateY(-270deg) translateX(100px);
transform-origin: top right;
}
Left side will have transform set to “rotateY(270deg) translateX(-100px)” transform-origin set to “center left”.
CSS:
.left {
transform: rotateY(270deg) translateX(-100px);
transform-origin: center left;
}
Side on the top will have transform of “rotateX(-90deg) translateY(-100px)” and transform-origin of “top center”.
CSS:
.top {
transform: rotateX(-90deg) translateY(-100px);
transform-origin: top center;
}
For bottom side set transform to “rotateX(90deg) translateY(100px)” and transform-origin to “bottom center”.
CSS:
.bottom {
transform: rotateX(90deg) translateY(100px);
transform-origin: bottom center;
}
The last side, front, will use only transform property and it will be set to “translateZ(100px)”.
CSS:
.front { transform: translateZ(100px); }
With this, we finished the CSS part and also whole challenge for today.
Summary
CSS3 3D transform can be very intimidating not just for beginners, but also for advanced web designers and developers. The best way to understand this CSS module is by practicing it on real life examples. Play with the code, modify the values and try to enhance and improve the result with your ideas. You can change the rotation and the view or add some animations to the whole box. Use your imagination.
If you liked this article, please subscribe so you don't miss any future post.
If you'd like to support me and this blog, you can become a patron, or you can buy me a coffee 🙂
Become a Patron
