Star Wars Mini Projects in Codepen
The Star Wars universe seems to be a bit of a recurring theme for me when experimenting with 3D modelling and animation in Codepen. Here are some pens and a bit of explanation of how they were made. Naturally the code is available by switching the view.
CSS 3D Tie Fighter Wireframe[codepen_embed height=500 theme_id=1 slug_hash='wMYaBL' user='chris22smith' default_tab='result' animations='run'] See the Pen <a href='https://codepen.io/chris22smith/pen/wMYaBL'>CSS 3D Tie Fighter Wireframe</a>. [/codepen_embed]
The Tie Fighter body is just made up of a number of circles, <div>s with border-radius:50% rotated using transform:rotateY(). See the pen CSS Sphere Wireframe to see this part in isolation. The front cockpit window circles are the same but brought forward using transform:translateZ(). The axle is actually just 2 flat rectangles. One is brought slightly forwards and the other is set slightly back using transform:translateZ(). The hexagonal wings were the most difficult part. The hexagons are made up of 3 rectangles rotated through 60 degrees. The inner triangles are then formed using pseudo elements inside these triangles which are rotated 30 degrees and have one border applied and the dimensions set just right. See the pen CSS Hexagon with inner triangles to see just this part. Finally, the whole thing, the .sphere, is rotated to show off the 3D. The blueprint style background is a combination of linear gradients and background sizing and positioning.
Tie Fighter Attack[codepen_embed height=500 theme_id=1 slug_hash='EKKeZv' user='chris22smith' default_tab='result' animations='run'] See the Pen <a href='https://codepen.io/chris22smith/pen/EKKeZv'>Tie Fighter Attack</a>. [/codepen_embed]
3D Death Star[codepen_embed height=500 theme_id=1 slug_hash='QNYOQQ' user='chris22smith' default_tab='result' animations='run'] See the Pen <a href='https://codepen.io/chris22smith/pen/QNYOQQ'>3D Death Star</a>. [/codepen_embed]
You can find lots of great pens in Marie Mosley's Star Wars collection.