News

Easy 3D object creation with CSS

Learn how to use the TriDiv web app to create complete 3D shapes in CSS without having to write any code

tridiv

tridiv

Creating 3D shapes in CSS can be a tedious – sometimes even torturous – undertaking, however rewarding the result. It is trial and error at the best of times, so it was only a matter of time before someone created a tool to do all the heavy lifting. Developer Julian Garnier did just that, launching his remarkable online app, TriDiv, to great acclaim last year.

TriDiv gives the user the ability to build and style 3D shapes in an extremely intuitive interface and then generates the CSS for you at the end. The interface is split into four windows – three views and a preview window – with editor options in each window and the right sidebar. Users can edit, preview and even save their work as they go. Garnier developed the app over five months and his labour of love has grown into an invaluable, not to mention addictive, resource for fellow developers. So, let’s get to grips with TriDiv and build a robot!

TriDiv Intro

Go to tridiv.com and check out the opening animation for a taste of the shape of things to come. It’s also well worth your time checking out Garnier’s demo X-Wing Fighter, pictured on the bottom left-hand side, at codepen.io/juliangarnier/pen/hzDAF, for a truly inspiring example of CSS3 animation. Then click on ‘Start ising the app’.

Meet the interface

TriDiv’s interface is split into four windows and a sidebar. The top-left window displays your project in its 3D state. The other windows display the same image in flat sections from various angles; top (xz), side (zy) and front (xy). The sidebar houses all of your editor options, although each window also offers editor controls once they have a shape to work with.

Create a shape

Let’s jump right in and create a shape. Choose a cylinder from the four options in the top toolbar, right side. You can now view it in the various windows. By default, the editor tools display first in the top view (top-right window). Each is clearly labelled on hover and clicking on the top symbol (Edit) will open up the editing tools.

Start a project

Click on the ‘New’ icon in the top toolbar, then ‘Yes, erase and continue’ to start a new project. You can name the new project in the top-left title box, after which TriDiv will automatically save it for you. Now add a cuboid shape, our robot’s head, from the top menu bar. We’re going to change the shape and position.

Change the size

Go to the sidebar controls. Under Shape Properties (ems), enter the values w:10, h:10, d:7 to set the shape size. Round the cube’s edges by entering ‘1’ into the corners box. Since this is the robot’s head, and we’re starting from a centre y value of 0, we should move it up by placing a value of -14 in the y input.

Second shape

Now add a cylinder shape and move it around by changing the x, y and z values. Use x:-2, y:-16 and z:4 and then an x-deg value of 90 to rotate it. The cylinder measurements are done by diameter rather than width and depth, so put in Diameter:3 and h:1. Use zoom, under Document Settings, if you need to.

Duplicate shapes

In the top-right window, click on the centrepoint of the new cylinder to open the circular editing menu. By clicking on the duplicate icon, bottom-right corner, we can create a quick duplicate of our cylinder. All we want to do with this duplicate is change the x value to 2. Then create a further duplicate for each cylinder and change the size to d:2.

Second cuboid

Create a second cuboid shape with the dimensions w:7, h:1 and d:1. We want to place it below the cylinders, with a duplicate created to sit just below it. The first (cub-2) should have the values of x:0, y:-12 and z:3.5. The next (cub-3) only needs to have the y value changed to -11. We’ve just given our robot a mouth!

Pyramid ears

We’re going to stick a pyramid on each side of our main cuboid. Create your first pyramid and enter the values diam:5 and h:2. Rotate it with a z-deg value of -90, and then x:-6, y:-15 and z:0 will put it in place. Duplicate it and change the z-deg value for this pyramid to 90 and adjust the  x value to 6.

Robot’s body

First we’ll give Robot a neck by placing a cylinder with a diameter of 6 and a height of 1.5 at a y position of -8.5. A large cuboid will serve as the body. Values should be w:17, h:17 and d:13 in size, nudged up with a y value of 0.5. Why not view in Preview mode (top-right button), to check out your progress?

The upper arms

Create two duplicates of the neck cylinder and place them on either side of the body; x:-9 (and 9). Y-4, z:0, diam:6, h:1.5 and z-deg:90. The upper arm shapes consist of altered and duplicated cuboids. Values are x:-10.5 (and 10.5), y:-2, z:4, w:17, h:2, d:5, x-deg:60 and z-deg:90. Round off the top and bottom with 2.5 in corners. Perfect.

Forearms

Use duplicate upper arms shapes in order to form the forearms, but with reduced sizes of w:12, h:2 and d:4. Straighten the angle with z and x-reg values of 90, and position x:-10.5 (and 10.5), y:1.5, and z:13. Now add flattened cylinders to begin the hands, diam:5 and h:3. Position at the end of the forearm; x:-10.5, y:1.5, z:10. Then mirror it.

Robot claws

Our Robot’s fearsome claws are made up of two prisms per hand, mirroring each other. The bottom has an x-deg of 110, the top -70 and a y-deg of 180. Size your claws to taste, but ensure that you keep them in line with the hand cylinder. Change the x-deg if you want to open up the claws a little more.

Lower section

Add another connecting cylinder below the main body, and another rounded cuboid below that. Finally, a pair of large cuboids rounded with 2.5 corners gives our Robot some tracks for trundling around. You can set your own sizes but these tracks are w:6, h:9 and d:23. Add a connecting cylinder between the tracks to finish off.

Add some colour

Add any other little details that you would like to include and then begin highlighting objects that you want to colour in. Click on the blank box next to Colors, under Shape Styles. The colour menu will open, giving you the option to colour specific sides or the whole object with a colour picker.

Add a background

In addition to colouring the robot, you can also add in a background as well as change the lighting effects. Go to Preview mode to make the changes and play around with the lighting menu. Dynamic lighting can be processor-intensive if you have a lot of shapes.

Grab your code

TriDiv offers you a number of ways to use your creation. You can copy the HTML and CSS it has generated and paste them elsewhere. Bear in mind that you will need to add vendor prefixes yourself before it will work. Alternatively, an embed link is available, containing your 3D image in an iframe.

A SNIPPET OF TRIDIV CODE

The HTML and CSS for such a complex shape is huge, but here is a little taste of both

001    <style>
002    #tridiv {perspective: 800px; position: absolute; overflow: 
hidden; width: 100%; height: 100%; background: #141414;}
003    .face { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.4);}
004    .scene, .shape, .face, .face-wrapper, .cr {position: 
absolute; transform-style: preserve-3d;}
005    .scene {width: 80em; top: 50%; left: 50%; margin: -40em 0 0 
-40em;}
006    [class*=”cuboid”] .ft, [class*=”cuboid”] .bk {width: 100%; 
height: 100%;}
007    [class*=”cuboid”] .rt {transform: rotateY(-90deg) 
translateX(-50%);}
008    </style>
009    <div id=”tridiv”>
010        <div class=”scene” style=”-webkit-transform:rotateX(-
10deg) rotateY(-24deg); -moz-transform:rotateX(-10deg) 
rotateY(-24deg); -ms-transform:rotateX(-10deg) rotateY(-
24deg); transform:rotateX(-10deg) rotateY(-24deg); “>
011            <div class=”shape cuboid-1 cub-1”>
012                <div class=”face ft”>
013                    <div class=”photon-shader” style=”background-color:
rgba(255, 255, 255, 0.282353);”></div>
014                </div>
015                <div class=”face bk”>
016                    <div class=”photon-shader” style=”background-color:
rgba(0, 0, 0, 0.886275);”></div>
017                </div>
018                <div class=”face rt”>
019                    <div class=”photon-shader” style=”background-color:
rgba(0, 0, 0, 0.101961);”></div>
020                </div>
021                <div class=”face lt”>
022                    <div class=”photon-shader” style=”background-color:
rgba(0, 0, 0, 0.494118);”></div>
023                </div>

Improve your web design skills with Web Designer. Download issues direct from GreatDigitalMags.com or buy print issues from ImagineShop

×