Hello, dear friend, you can consult us at any time if you have any questions, add WeChat: THEend8_
FIT2092 - Interactive Media Studio 2
WEEK 9 STUDIO
MULTI-OBJECT SCENES WITH CSS 3D
Last week we explored the basic techniques required to create simple interactive 3D effects. By
creating flipping cards and cubes, we learned about the difference between single-element
and multi-element perspective.
This week's tutorial builds on these techniques to assemble multiple box-shaped objects into a
single scene to create an animated character. By making use of nesting, we will be able to
rotate the entire scene freely, while still retaining the ability to animate each part of the
character independently.
To help with visualising the positioning of faces and objects, we will implement a new JavaScript
system for rotating 3D objects, while using the developer tools in Google Chrome to help adjust
element positioning in real-time.
Note: The character artwork used in this exercise is based on excellent designs by Chris
These designs show how great artwork can make
simple geometry feel appealing and expressive.
Remember that the 3d object/scene that you create for your assignment must be an original
design - do not recreate existing designs or use trademarked characters.
Learning outcomes this week:
● Control 3D rotation using mouse dragging interactions
● Use Chrome's element inspector to help adjust 3D positioning
● Position multiple objects together to create more complex scenes
● Create animations that move objects separately within a scene
1
Interactive Media Studio 2
Week 9: Multi-Object Scenes With CSS 3D
Set up a scene for multiple objects
Download and extract the files for this activity. Open the 3d-scene.html file in Google Chrome
to see the rotatable Rubik's Cube that we worked on in the previous studio activity.
1. The initial HTML andCSS code
Open 3d-scene.html in your editor. This has the same structure that we used previously:
Our scene this week will be made up of box-shaped objects, so this cube can be reused
as a template. The CSS and JS code is in the files 3d-scene.css and 3d-scene.js.
Locate for the styles for the cube object and faces in 3d-scene.css:
.cube { width: 300px; height: 300px; }
.cube .front { transform: rotateY(0deg) translate3d(0px,0px,150px); }
.cube .back { transform: rotateY(180deg) translate3d(0px,0px,150px); }
.cube .top { transform: rotateX(90deg) translate3d(0px,0px,150px); }
.cube .bottom { transform: rotateX(-90deg) translate3d(0px,0px,150px);}
.cube .left { transform: rotateY(-9deg) translate3d(0px,0px,150px); }
.cube .right { transform: rotateY(90deg) translate3d(0px,0px,150px); }
This code is similar to last week, except now each face's selector includes the class of
the parent object .cube. Additionally, instead of using translateZ() to position each face,
we now use translate3d() to allow easy adjustment of positioning on all 3 axes.
2. Setting up a single scene
Multi-object scenes work by nesting objects inside of a 3D scene container. In
3d-scene.html, wrap a div element with the class name "scene" around the cube:
div>
div>
In 3d-scene.css, locate the .object selector. Delete the transform property and change
the selector so that both .scene and .object elements are selected:
2
Interactive Media Studio 2
Week 9: Multi-Object Scenes With CSS 3D
.scene, .object {
transform: perspective( 1000px );
transformstyle: preserve-3d;
}
Both the scene and any objects contained within it will now be treated as 3D space.
Re-apply perspective as a property in the body selector:
perspective: 1000px;
This ensures that we only ever have 1 camera (on the body element) setting perspective
for the whole page. Test the page - the 3D effect may appear more exaggerated. You
can increase the perspective value to make the effect less extreme.
In the .face selector, remove the width and height properties.
.face {
width: 300px;
height: 300px;
position: absolute;
}
When using image elements as faces, we can rely on the real dimensions of the artwork.
If necessary, you can still override the dimensions on individual faces.
Elements can exist outside of the scene
The .scene container is used to contain all 3D objects for your scene. This container
provides you with rotatable, perspective-correct space.
Elements can be added outside of the scene to implement features that exist outside of the
rotatable space. This could include 2D UI elements that are positioned to appear around or
in front of the 3D objects.
Use this scene structure as a template for all future 3DCSSwork
Any variation to this HTML/CSS setup when setting transform-style and perspective will
result in perspective flattening or unnecessary perspective distortion in your scene.
3
Interactive Media Studio 2
Week 9: Multi-Object Scenes With CSS 3D
Click and drag to rotate
For this exercise, we will implement a new method of controlling the rotation of the scene, so
that instead of having the rotation automatically follow the mouse, we will be able to drag the
object to rotate it.