微信客服：xiaoxionga100
微信客服：ITCS521
FIT2092-无代写
时间：2023-10-03
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
Beaumont and the contributing artists at http://www.cubeecraft.com. Cubeecraft has
hundreds of designs dating back to 2008. 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:
div>
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.
1. Set up variables and event handling
Open the 3d-scene.js file in your editor. Comment out the existing code to disable it.
We will write new rotation code, but some principles you learned previously will be used.
Begin with 2 new variable declarations to cache the elements that we will be using. The
$window will trigger mouse events, and $scene will be the element that rotates.
let $window = $( window );
let $scene = $( '.scene' );
Also declare 2 variables that to keep track of the scene's current rotation angle:
let rX = 0;
let rY = 0;
Like in the previous exercise, mouse movement will trigger rotation. However, this time
the movement will only occur when we click and drag within the 3D scene.
Add event listeners in your script initialisation to detect the mouse button being
pressed and released:
$window.on( 'mousedown', function(){
$window.on( 'mousemove', rotateScene );
} );
$window.on( 'mouseup', function(){
$window.off( 'mousemove', rotateScene );
} );
When the mouse button is pressed down, $window starts listening for mouse
movements and running the rotateScene function. When the mouse button is released,
the listener is removed.
Declare the new rotateScene function in the function definitions.
const rotateScene = function ( event ) {
}
Test the page, checking the DevTools Console to make sure there are no errors.
4
Interactive Media Studio 2
Week 9: Multi-Object Scenes With CSS 3D
2. Disable image selection and dragging
Even though we have not coded the rotateScene function yet, try dragging the cube
now. You may notice a problem...
Because the faces are img elements, each face is draggable by default. This interferes
with any attempts to use dragging interactions. Luckily, this behaviour can be disabled
using CSS and JavaScript.
In 3d-scene.css, locate the .scene, .object selector and add the following:
userselect: none;
In 3d-scene.js, add the following code in the script initialisation:
$( '.face' ).prop( 'draggable', false );
This will make any elements within the 3D scene non-selectable and all 3D faces
non-draggable.
3. Implement the scene rotation function
The scene rotation code will borrow some ideas from last week's exercise, but will be
much simpler, involving less maths.
When dragging in the browser window, the browser will continuously fire mousemove
events. To rotate a 3D scene as it is being dragged, we need to know how far the mouse
has moved between each mousemove event.
The mouse event data from the mousemove event contains the following properties:
● MouseEvent.movementX positive or negative horizontal movement in pixels
● MouseEvent.movementY positive or negative vertical movement in pixels
Left: clientX/Y are absolute coordinates. Right: movementX/Y are relative to the previous mouse position.
Within the empty rotateScene function, we will take the rX and rY rotation variables
(currently set to 0) and update them by adding the mouse movement distance values.
5
Interactive Media Studio 2
Week 9: Multi-Object Scenes With CSS 3D
For rotation around the Y-axis, we add the horizontal movement:
rY += event.originalEvent.movementX;
And for rotation around the X-axis, we subtract the vertical movement distance:
rX -= event.originalEvent.movementY;
The updated rX and rY values contain the new angles to apply as the rotation of $scene.
Within the rotateScene function, add one final line of code to update the CSS of $scene:
$scene.css( 'transform', 'rotateX('+ rX +'deg) rotateY('+ rY +'deg)' );
This applies a transform property to the scene with the appropriate X and Y-axis
rotations. Save your code and test your page.
You should now be able to drag anywhere within the browser window to rotate the
scene. When the mouse button is released, the rotation will stop and will not be affected
by further mouse movement.
4. Adjust the rotation direction and speed
If the rotation feels too sensitive, you can reduce its speed by dividing the movementX
and movementY values:
rY += event.originalEvent.movementX / 2;
rX -= event.originalEvent.movementY / 2;
You can also experiment with inverting the rotation axis by changing += to -= (or vice
versa).
6
Interactive Media Studio 2
Week 9: Multi-Object Scenes With CSS 3D
Building individual objects using DevTools
Now we can begin constructing each of the boxes for the head, body, arms and legs. With a
working rotation function, we will now be able to inspect objects from all sides to check for
positioning errors.
1. Comment out the cube to use as an object template
We no longer need to show the cube object, but we need to keep the code in a
convenient place so that we can refer to the code as a template for other objects.
In 3d-scene.html, locate the cube object element and add comment tags around it to
disable it.
The CSS code for the cube does not need to be altered at this point.
2. Assembling the head object's faces
Choose one of the 3 characters shown on page 1 of this document. The tutorial folder
has separate subfolders for each character with images for different faces of each body
part.
Note the way that each file is named. For example, Batman's head:
● head-back.png
● head-front.png
● head-left-right.png
● head-top-bottom.png
In this example, head-left-right.png is the image used for both the left and right faces
of the head. The head-top-bottom.png image is used for both the top and bottom. The
file naming will be slightly different for each of the 3 characters. Having a meaningful
naming system for images makes files easier to locate.
7
Interactive Media Studio 2
Week 9: Multi-Object Scenes With CSS 3D
Make a copy of the cube element's HTML code and paste it inside of the scene element,
below the comment. In the class attribute of the object element, replace "cube" with
"head". Also replace each of the images with the appropriate images for your character.
For example:
div>
In 3d-scene.css, locate the 7 selectors for the cube object and its 6 faces. Make an
additional copy of these selectors, changing ".cube" in the selectors to ".head":
.head { width: 300px; height: 300px; }
.head .front { transform: rotateY(0deg) translate3d(0px,0px,150px); }
.head .back { transform: rotateY(180deg) translate3d(0px,0px,150px); }
.head .top { transform: rotateX(90deg) translate3d(0px,0px,150px); }
.head .bottom { transform: rotateX(-90deg) translate3d(0px,0px,150px);}
.head .left { transform: rotateY(-90deg) translate3d(0px,0px,150px); }
.head .right { transform: rotateY(90deg) translate3d(0px,0px,150px); }
Next, we need to set the width and height of the head object. This will be the size of front
or back face images, minus any parts that overhang the box shape.
Above: Excluding overhanging artwork, all of these characters' faces have the same dimensions.
If you are unsure, you can open the image in an image editor and check the size using a
rectangular selection tool. For these characters, set the width and height of the head as
shown below:
.head { width: 300px; height: 210px; }
This will keep the head centred in the browser window. You can now set the Z-axis
translation of each face to 0px. This will give us the following code:
8
Interactive Media Studio 2
Week 9: Multi-Object Scenes With CSS 3D
.head { width: 300px; height: 210px; }
.head .front { transform: rotateY(0deg) translate3d(0px,0px,0px); }
.head .back { transform: rotateY(180deg) translate3d(0px,0px,0px); }
.head .top { transform: rotateX(90deg) translate3d(0px,0px,0px); }
.head .bottom { transform: rotateX(-90deg) translate3d(0px,0px,0px); }
.head .left { transform: rotateY(-90deg) translate3d(0px,0px,0px); }
.head .right { transform: rotateY(90deg) translate3d(0px,0px,0px); }
Save both the HTML and CSS files before testing the page.
The 6 faces will be correctly oriented and positioned intersecting the object.
Above: The faces are oriented but not yet translated. Object container size matches the front face.
Instead of manually setting the position of each face in the CSS file, we can use the
DevTools Elements panel to assist us.
3. Setting position transform values using DevTools
In your browser window, right-click on any of the object's faces and select Inspect. This
will open the DevTools Elements panel - check it to see which face you have selected.
In the Styles pane, locate the selector for the selected face's transform property and
double-click the value to edit it. Place your text cursor in the 3rd value of the
translate3d() function. This is the Z-axis translation.
9
Interactive Media Studio 2
Week 9: Multi-Object Scenes With CSS 3D
Instead of typing a value, you can use the up/down arrow keys on your keyboard to
adjust the value. The object will update in the browser window in real-time.
● Up and Down to change the value by 1px
● Shift+Up and Shift+Down to change the value by 10px
● Ctrl+Up and Ctrl+Down to change the value by 100px
● Alt+Up and Alt+Down to change the value by 0.1px
● You can also scroll your mouse wheel instead of using the arrow keys.
Zoom in in your browser (Ctrl and +) for a closer view of the 3D construction.
Help! My scene rotation is stuck!
While working in the Styles pane, the scene's drag-to-rotate function may stop working. If
this happens, just reselect the element in the element inspector panel.
Using this method, adjust the positioning of the face. Until it is in the correct position.
When done, select another face and repeat the process. Position all 6 faces, rotating the
object to check that the positioning is correct on all 6 sides.
Remember that translation values on the Z-axis should be positive measurements.
When you are done positioning the faces, the final CSS styles need to be copied from
DevTools back to your 3d-scene.css file.
In the Styles pane, locate the CSS file link that appears to the right of CSS selectors:
Click on the link to open the file in the Sources panel. The alert icon in the tab of the file
indicates that there are unsaved changes in the 3d-scene.css file.
10
Interactive Media Studio 2
Week 9: Multi-Object Scenes With CSS 3D
Select all of the CSS code and copy it. Return to the 3d-scene.css file in your code editor
and select all of the CSS code and paste. This will replace all of the code in the editor
with code copied from DevTools.
Save the CSS file and reload the page in your browser. The edits face positioning edits
made in DevTools are now permanently saved.
4. Building the other body parts
When you are happy with how the head looks, go back to the HTML file and add
comment marks around the head to hide it.
Make a new copy of the cube's HTML and CSS and repeat the previous steps to create
the character's body, left arm and left leg. Remember to set the width and height for
each object container element.
Currently we only have the left arm and left leg. Instead of building the right arm and leg
separately, we can make a copy of the existing body part and flip it horizontally.
In the HTML file, make a copy of the arm object's HTML. In the copied arm, modify the
class name to indicate that it is the right arm:
In the CSS file, create a new selector that selects the right arm only. In this selector, set a
transform that uses scaleX to flip the object along the X-axis:
.arm.right { transform: scaleX( -1 ); }
Repeat this process to create the right leg as well.
11
Interactive Media Studio 2
Week 9: Multi-Object Scenes With CSS 3D
Assembling objects in a scene
Now we have the pieces for our 3D character. Test the page in your browser and you will see
something unusual. The body parts are stacked in a single column (because div elements
normally stack vertically).
1. Setting the initial starting position for all objects
Absolute positioning will allow each object to be moved without affecting other objects
in the scene.
In the CSS file, create a new selector for the object class and use it to set all objects to
use absolute positioning:
.object { position: absolute; }
This positions all objects with their top-left corner in the centre of the screen. This is
because the scene is centred with no width or height.
Fix this by creating a new .scene selector and setting the width and height to match the
approximate size (or exact size, if you can calculate it) of the final assembled model.
.scene { width: 300px; height: 500px; }
Hint: Add together the heights of the head, body and leg
elements to calculate the exact height of the assembled
scene.
Save the code and reload the page. The objects should now
be repositioned, with the head sitting in an appropriate
position.
2. Preparing to position each object
At this point, every object is positioned in the top-left corner
12
Interactive Media Studio 2
Week 9: Multi-Object Scenes With CSS 3D
of the scene. This is the correct position for the head. The other objects will need to be
re-positioned using translate3d().
In the CSS file, add a transform property to each object's selector (except for the head,
which is already correctly positioned). Start with the body object:
.body {
width:200px; height:200px;
transform: translate3d( 0px, 0px, 0px );
}
Repeat this for the left arm and left leg. The right arm and right leg already have
transform properties, so just append translate3d() to the existing property, after the
scaleX() function:
.arm.right { transform: scaleX( -1 ) translate3d( 0px, 0px, 0px ); }
.leg.right { transform: scaleX( -1 ) translate3d( 0px, 0px, 0px ); }
3. Adjust the position of each object
Each object can now be positioned using the same technique that we used to position
the individual object faces.
Open the DevTools Elements panel and locate the div element for the character's body.
In the Styles panel, select the .body selector's translate3d() function and adjust the first
and second values (X and Y-axis translation) to position the body directly underneath
the head. You may need to rotate the scene in your browser window to make sure the
objects are perfectly aligned.
13
Interactive Media Studio 2
Week 9: Multi-Object Scenes With CSS 3D
Repeat this process for the arms and legs. The final translate3d values for each object
are shown below. Copy the final styles from the Sources panel back to your CSS file.
.body {
width:200px; height:200px;
transform: translate3d( 50px, 210px, 0px );
}
.arm {
width:70px; height:140px;
transform: translate3d( -20px, 230px, 0px );
}
.leg {
width:70px; height:90px;
transform: translate3d( 70px, 410px, 0px );
}
.arm.right { transform: scaleX(-1) translate3d(-250px, 230px, 0px); }
.leg.right { transform: scaleX(-1) translate3d(-160px, 410px, 0px); }
Your translate3d() measurements may be slightly different if you are creating one of
the other 2 characters, or just prefer slightly different positioning of body parts.
Rotate the scene to check that everything is aligned correctly and that no body parts
are intersecting. Make small adjustments to the measurements if necessary.
If you notice that the scene is not perfectly centred in the browser window, adjust the
width and height properties of the scene element. Make these adjustments in the
element inspector and copy the styles back to your CSS file.
14
Interactive Media Studio 2
Week 9: Multi-Object Scenes With CSS 3D
Animating the body parts
To animate the character, we can use CSS keyframe animations to change the transform
properties of different body parts. You can also use transitions for interactive animations that
run once.
1. Animate a turning head
The head will be the simplest object to animate because it does not have any transform
property applied to it yet. In the .head selector, add the following animation property:
.head {
width:300px; height:210px;
animation: 5s turnhead easeinout infnite alternate;
}
Add a set of keyframes to rotates the head slightly from side to side:
@keyframes turnhead {
0% { transform: rotateY( 10deg ); }
100% { transform: rotateY( -10deg ); }
}
2. Animate a swinging arm
When animating the limbs, we need to be more careful as these objects already have
transform properties that set the position of the limbs. In the .arm selector, add an
animation property:
.arm {
width:70px; height:140px;
transform: translate3d( -20px, 230px, 0px );
animation: 1s swingarm easeinout infnite alternate;
}
Add a set of keyframes for the swing-arm animation. This time copy the existing
15
Interactive Media Studio 2
Week 9: Multi-Object Scenes With CSS 3D
transform property from the .arm selector and append the rotation changes to it:
@keyframes swingarm {
0% { transform: translate3d(-20px, 230px, 0px) rotateX( 45deg ); }
100% { transform: translate3d(-20px, 230px, 0px) rotateX( -45deg ); }
}
Note: this animation also overrides the right arm’s position. This will be fixed later.
3. Setting the arm's pivot point
This swing-arm animation currently pivots the arm around its centre instead of at the
top where the character's shoulder joint would be.
To adjust the position of the pivot, set a transform-origin property in the .arm selector:
.arm {
width:70px; height:140px;
transform: translate3d( -20px, 230px, 0px );
animation: 1s swingarm easeinout infnite alternate;
transformorigin: 50% 5% 0px;
}
The arm's pivot point can be adjusted on 3 axes:
● The first value (50%) sets it to the middle of the X-axis (50% is the default value).
● The second value (5%) sets it near the top of the Y-axis (top of the arm).
● The third value (0px) is the Z-axis position and cannot be a percentage.
16
Interactive Media Studio 2
Week 9: Multi-Object Scenes With CSS 3D
4. Animating the right arm
After we added an animation to the left arm, the right arm disappeared. This is due to
the transform properties in the swing-arm animation overriding the transform
properties in the .arm.right selector. We can correct this by giving the right arm its own
animation.
The process is the same as the left arm. Start by adding an animation to the .arm.right
selector:
.arm.right {
transform: scaleX( -1 ) translate3d( -250px, 230px, 0px );
animation: 1s swingarmright easeinout infnite alternate;
}
Create a set of keyframes for the swing-arm-right animation using the transform
property from .arm.right as a starting point for both keyframes.
@keyframes swingarmright {
0% { transform: scaleX(-1) translate3d(-250px, 230px, 0px)
rotateX(-45deg); }
100% { transform: scaleX(-1) translate3d(-250px, 230px, 0px)
rotateX(45deg); }
}
Note that the right arm should swing in the opposite direction compared to the left arm,
so this animation begins at -45deg, ending at 45deg.
Save the code and test the animation.
5. Challenge: Animate the legs
Can you complete the exercise by creating animations for both legs?
● The technique will be the same as the technique used to animate the arms.
● The legs should swing in the opposite direction to the arms.
● The right leg should swing in the opposite direction to the left leg.
● Move the pivot point to slightly above the top of the leg with a Y-axis value of -5%.
Remember that the DevTools Elements
panel will show when a CSS rule cannot
be applied due to a syntax error. Styles
with these errors will be crossed-out
and have an alert icon.
Hover your mouse over the error icon to
see whether the mistake is in the
property name or value. The relevant
line number for the style shown to the
right of the CSS file name.
div>
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.
1. Set up variables and event handling
Open the 3d-scene.js file in your editor. Comment out the existing code to disable it.
We will write new rotation code, but some principles you learned previously will be used.
Begin with 2 new variable declarations to cache the elements that we will be using. The
$window will trigger mouse events, and $scene will be the element that rotates.
let $window = $( window );
let $scene = $( '.scene' );
Also declare 2 variables that to keep track of the scene's current rotation angle:
let rX = 0;
let rY = 0;
Like in the previous exercise, mouse movement will trigger rotation. However, this time
the movement will only occur when we click and drag within the 3D scene.
Add event listeners in your script initialisation to detect the mouse button being
pressed and released:
$window.on( 'mousedown', function(){
$window.on( 'mousemove', rotateScene );
} );
$window.on( 'mouseup', function(){
$window.off( 'mousemove', rotateScene );
} );
When the mouse button is pressed down, $window starts listening for mouse
movements and running the rotateScene function. When the mouse button is released,
the listener is removed.
Declare the new rotateScene function in the function definitions.
const rotateScene = function ( event ) {
}
Test the page, checking the DevTools Console to make sure there are no errors.
4
Interactive Media Studio 2
Week 9: Multi-Object Scenes With CSS 3D
2. Disable image selection and dragging
Even though we have not coded the rotateScene function yet, try dragging the cube
now. You may notice a problem...
Because the faces are img elements, each face is draggable by default. This interferes
with any attempts to use dragging interactions. Luckily, this behaviour can be disabled
using CSS and JavaScript.
In 3d-scene.css, locate the .scene, .object selector and add the following:
userselect: none;
In 3d-scene.js, add the following code in the script initialisation:
$( '.face' ).prop( 'draggable', false );
This will make any elements within the 3D scene non-selectable and all 3D faces
non-draggable.
3. Implement the scene rotation function
The scene rotation code will borrow some ideas from last week's exercise, but will be
much simpler, involving less maths.
When dragging in the browser window, the browser will continuously fire mousemove
events. To rotate a 3D scene as it is being dragged, we need to know how far the mouse
has moved between each mousemove event.
The mouse event data from the mousemove event contains the following properties:
● MouseEvent.movementX positive or negative horizontal movement in pixels
● MouseEvent.movementY positive or negative vertical movement in pixels
Left: clientX/Y are absolute coordinates. Right: movementX/Y are relative to the previous mouse position.
Within the empty rotateScene function, we will take the rX and rY rotation variables
(currently set to 0) and update them by adding the mouse movement distance values.
5
Interactive Media Studio 2
Week 9: Multi-Object Scenes With CSS 3D
For rotation around the Y-axis, we add the horizontal movement:
rY += event.originalEvent.movementX;
And for rotation around the X-axis, we subtract the vertical movement distance:
rX -= event.originalEvent.movementY;
The updated rX and rY values contain the new angles to apply as the rotation of $scene.
Within the rotateScene function, add one final line of code to update the CSS of $scene:
$scene.css( 'transform', 'rotateX('+ rX +'deg) rotateY('+ rY +'deg)' );
This applies a transform property to the scene with the appropriate X and Y-axis
rotations. Save your code and test your page.
You should now be able to drag anywhere within the browser window to rotate the
scene. When the mouse button is released, the rotation will stop and will not be affected
by further mouse movement.
4. Adjust the rotation direction and speed
If the rotation feels too sensitive, you can reduce its speed by dividing the movementX
and movementY values:
rY += event.originalEvent.movementX / 2;
rX -= event.originalEvent.movementY / 2;
You can also experiment with inverting the rotation axis by changing += to -= (or vice
versa).
6
Interactive Media Studio 2
Week 9: Multi-Object Scenes With CSS 3D
Building individual objects using DevTools
Now we can begin constructing each of the boxes for the head, body, arms and legs. With a
working rotation function, we will now be able to inspect objects from all sides to check for
positioning errors.
1. Comment out the cube to use as an object template
We no longer need to show the cube object, but we need to keep the code in a
convenient place so that we can refer to the code as a template for other objects.
In 3d-scene.html, locate the cube object element and add comment tags around it to
disable it.
The CSS code for the cube does not need to be altered at this point.
2. Assembling the head object's faces
Choose one of the 3 characters shown on page 1 of this document. The tutorial folder
has separate subfolders for each character with images for different faces of each body
part.
Note the way that each file is named. For example, Batman's head:
● head-back.png
● head-front.png
● head-left-right.png
● head-top-bottom.png
In this example, head-left-right.png is the image used for both the left and right faces
of the head. The head-top-bottom.png image is used for both the top and bottom. The
file naming will be slightly different for each of the 3 characters. Having a meaningful
naming system for images makes files easier to locate.
7
Interactive Media Studio 2
Week 9: Multi-Object Scenes With CSS 3D
Make a copy of the cube element's HTML code and paste it inside of the scene element,
below the comment. In the class attribute of the object element, replace "cube" with
"head". Also replace each of the images with the appropriate images for your character.
For example:
div>
In 3d-scene.css, locate the 7 selectors for the cube object and its 6 faces. Make an
additional copy of these selectors, changing ".cube" in the selectors to ".head":
.head { width: 300px; height: 300px; }
.head .front { transform: rotateY(0deg) translate3d(0px,0px,150px); }
.head .back { transform: rotateY(180deg) translate3d(0px,0px,150px); }
.head .top { transform: rotateX(90deg) translate3d(0px,0px,150px); }
.head .bottom { transform: rotateX(-90deg) translate3d(0px,0px,150px);}
.head .left { transform: rotateY(-90deg) translate3d(0px,0px,150px); }
.head .right { transform: rotateY(90deg) translate3d(0px,0px,150px); }
Next, we need to set the width and height of the head object. This will be the size of front
or back face images, minus any parts that overhang the box shape.
Above: Excluding overhanging artwork, all of these characters' faces have the same dimensions.
If you are unsure, you can open the image in an image editor and check the size using a
rectangular selection tool. For these characters, set the width and height of the head as
shown below:
.head { width: 300px; height: 210px; }
This will keep the head centred in the browser window. You can now set the Z-axis
translation of each face to 0px. This will give us the following code:
8
Interactive Media Studio 2
Week 9: Multi-Object Scenes With CSS 3D
.head { width: 300px; height: 210px; }
.head .front { transform: rotateY(0deg) translate3d(0px,0px,0px); }
.head .back { transform: rotateY(180deg) translate3d(0px,0px,0px); }
.head .top { transform: rotateX(90deg) translate3d(0px,0px,0px); }
.head .bottom { transform: rotateX(-90deg) translate3d(0px,0px,0px); }
.head .left { transform: rotateY(-90deg) translate3d(0px,0px,0px); }
.head .right { transform: rotateY(90deg) translate3d(0px,0px,0px); }
Save both the HTML and CSS files before testing the page.
The 6 faces will be correctly oriented and positioned intersecting the object.
Above: The faces are oriented but not yet translated. Object container size matches the front face.
Instead of manually setting the position of each face in the CSS file, we can use the
DevTools Elements panel to assist us.
3. Setting position transform values using DevTools
In your browser window, right-click on any of the object's faces and select Inspect. This
will open the DevTools Elements panel - check it to see which face you have selected.
In the Styles pane, locate the selector for the selected face's transform property and
double-click the value to edit it. Place your text cursor in the 3rd value of the
translate3d() function. This is the Z-axis translation.
9
Interactive Media Studio 2
Week 9: Multi-Object Scenes With CSS 3D
Instead of typing a value, you can use the up/down arrow keys on your keyboard to
adjust the value. The object will update in the browser window in real-time.
● Up and Down to change the value by 1px
● Shift+Up and Shift+Down to change the value by 10px
● Ctrl+Up and Ctrl+Down to change the value by 100px
● Alt+Up and Alt+Down to change the value by 0.1px
● You can also scroll your mouse wheel instead of using the arrow keys.
Zoom in in your browser (Ctrl and +) for a closer view of the 3D construction.
Help! My scene rotation is stuck!
While working in the Styles pane, the scene's drag-to-rotate function may stop working. If
this happens, just reselect the element in the element inspector panel.
Using this method, adjust the positioning of the face. Until it is in the correct position.
When done, select another face and repeat the process. Position all 6 faces, rotating the
object to check that the positioning is correct on all 6 sides.
Remember that translation values on the Z-axis should be positive measurements.
When you are done positioning the faces, the final CSS styles need to be copied from
DevTools back to your 3d-scene.css file.
In the Styles pane, locate the CSS file link that appears to the right of CSS selectors:
Click on the link to open the file in the Sources panel. The alert icon in the tab of the file
indicates that there are unsaved changes in the 3d-scene.css file.
10
Interactive Media Studio 2
Week 9: Multi-Object Scenes With CSS 3D
Select all of the CSS code and copy it. Return to the 3d-scene.css file in your code editor
and select all of the CSS code and paste. This will replace all of the code in the editor
with code copied from DevTools.
Save the CSS file and reload the page in your browser. The edits face positioning edits
made in DevTools are now permanently saved.
4. Building the other body parts
When you are happy with how the head looks, go back to the HTML file and add
comment marks around the head to hide it.
Make a new copy of the cube's HTML and CSS and repeat the previous steps to create
the character's body, left arm and left leg. Remember to set the width and height for
each object container element.
Currently we only have the left arm and left leg. Instead of building the right arm and leg
separately, we can make a copy of the existing body part and flip it horizontally.
In the HTML file, make a copy of the arm object's HTML. In the copied arm, modify the
class name to indicate that it is the right arm:
In the CSS file, create a new selector that selects the right arm only. In this selector, set a
transform that uses scaleX to flip the object along the X-axis:
.arm.right { transform: scaleX( -1 ); }
Repeat this process to create the right leg as well.
11
Interactive Media Studio 2
Week 9: Multi-Object Scenes With CSS 3D
Assembling objects in a scene
Now we have the pieces for our 3D character. Test the page in your browser and you will see
something unusual. The body parts are stacked in a single column (because div elements
normally stack vertically).
1. Setting the initial starting position for all objects
Absolute positioning will allow each object to be moved without affecting other objects
in the scene.
In the CSS file, create a new selector for the object class and use it to set all objects to
use absolute positioning:
.object { position: absolute; }
This positions all objects with their top-left corner in the centre of the screen. This is
because the scene is centred with no width or height.
Fix this by creating a new .scene selector and setting the width and height to match the
approximate size (or exact size, if you can calculate it) of the final assembled model.
.scene { width: 300px; height: 500px; }
Hint: Add together the heights of the head, body and leg
elements to calculate the exact height of the assembled
scene.
Save the code and reload the page. The objects should now
be repositioned, with the head sitting in an appropriate
position.
2. Preparing to position each object
At this point, every object is positioned in the top-left corner
12
Interactive Media Studio 2
Week 9: Multi-Object Scenes With CSS 3D
of the scene. This is the correct position for the head. The other objects will need to be
re-positioned using translate3d().
In the CSS file, add a transform property to each object's selector (except for the head,
which is already correctly positioned). Start with the body object:
.body {
width:200px; height:200px;
transform: translate3d( 0px, 0px, 0px );
}
Repeat this for the left arm and left leg. The right arm and right leg already have
transform properties, so just append translate3d() to the existing property, after the
scaleX() function:
.arm.right { transform: scaleX( -1 ) translate3d( 0px, 0px, 0px ); }
.leg.right { transform: scaleX( -1 ) translate3d( 0px, 0px, 0px ); }
3. Adjust the position of each object
Each object can now be positioned using the same technique that we used to position
the individual object faces.
Open the DevTools Elements panel and locate the div element for the character's body.
In the Styles panel, select the .body selector's translate3d() function and adjust the first
and second values (X and Y-axis translation) to position the body directly underneath
the head. You may need to rotate the scene in your browser window to make sure the
objects are perfectly aligned.
13
Interactive Media Studio 2
Week 9: Multi-Object Scenes With CSS 3D
Repeat this process for the arms and legs. The final translate3d values for each object
are shown below. Copy the final styles from the Sources panel back to your CSS file.
.body {
width:200px; height:200px;
transform: translate3d( 50px, 210px, 0px );
}
.arm {
width:70px; height:140px;
transform: translate3d( -20px, 230px, 0px );
}
.leg {
width:70px; height:90px;
transform: translate3d( 70px, 410px, 0px );
}
.arm.right { transform: scaleX(-1) translate3d(-250px, 230px, 0px); }
.leg.right { transform: scaleX(-1) translate3d(-160px, 410px, 0px); }
Your translate3d() measurements may be slightly different if you are creating one of
the other 2 characters, or just prefer slightly different positioning of body parts.
Rotate the scene to check that everything is aligned correctly and that no body parts
are intersecting. Make small adjustments to the measurements if necessary.
If you notice that the scene is not perfectly centred in the browser window, adjust the
width and height properties of the scene element. Make these adjustments in the
element inspector and copy the styles back to your CSS file.
14
Interactive Media Studio 2
Week 9: Multi-Object Scenes With CSS 3D
Animating the body parts
To animate the character, we can use CSS keyframe animations to change the transform
properties of different body parts. You can also use transitions for interactive animations that
run once.
1. Animate a turning head
The head will be the simplest object to animate because it does not have any transform
property applied to it yet. In the .head selector, add the following animation property:
.head {
width:300px; height:210px;
animation: 5s turnhead easeinout infnite alternate;
}
Add a set of keyframes to rotates the head slightly from side to side:
@keyframes turnhead {
0% { transform: rotateY( 10deg ); }
100% { transform: rotateY( -10deg ); }
}
2. Animate a swinging arm
When animating the limbs, we need to be more careful as these objects already have
transform properties that set the position of the limbs. In the .arm selector, add an
animation property:
.arm {
width:70px; height:140px;
transform: translate3d( -20px, 230px, 0px );
animation: 1s swingarm easeinout infnite alternate;
}
Add a set of keyframes for the swing-arm animation. This time copy the existing
15
Interactive Media Studio 2
Week 9: Multi-Object Scenes With CSS 3D
transform property from the .arm selector and append the rotation changes to it:
@keyframes swingarm {
0% { transform: translate3d(-20px, 230px, 0px) rotateX( 45deg ); }
100% { transform: translate3d(-20px, 230px, 0px) rotateX( -45deg ); }
}
Note: this animation also overrides the right arm’s position. This will be fixed later.
3. Setting the arm's pivot point
This swing-arm animation currently pivots the arm around its centre instead of at the
top where the character's shoulder joint would be.
To adjust the position of the pivot, set a transform-origin property in the .arm selector:
.arm {
width:70px; height:140px;
transform: translate3d( -20px, 230px, 0px );
animation: 1s swingarm easeinout infnite alternate;
transformorigin: 50% 5% 0px;
}
The arm's pivot point can be adjusted on 3 axes:
● The first value (50%) sets it to the middle of the X-axis (50% is the default value).
● The second value (5%) sets it near the top of the Y-axis (top of the arm).
● The third value (0px) is the Z-axis position and cannot be a percentage.
16
Interactive Media Studio 2
Week 9: Multi-Object Scenes With CSS 3D
4. Animating the right arm
After we added an animation to the left arm, the right arm disappeared. This is due to
the transform properties in the swing-arm animation overriding the transform
properties in the .arm.right selector. We can correct this by giving the right arm its own
animation.
The process is the same as the left arm. Start by adding an animation to the .arm.right
selector:
.arm.right {
transform: scaleX( -1 ) translate3d( -250px, 230px, 0px );
animation: 1s swingarmright easeinout infnite alternate;
}
Create a set of keyframes for the swing-arm-right animation using the transform
property from .arm.right as a starting point for both keyframes.
@keyframes swingarmright {
0% { transform: scaleX(-1) translate3d(-250px, 230px, 0px)
rotateX(-45deg); }
100% { transform: scaleX(-1) translate3d(-250px, 230px, 0px)
rotateX(45deg); }
}
Note that the right arm should swing in the opposite direction compared to the left arm,
so this animation begins at -45deg, ending at 45deg.
Save the code and test the animation.
5. Challenge: Animate the legs
Can you complete the exercise by creating animations for both legs?
● The technique will be the same as the technique used to animate the arms.
● The legs should swing in the opposite direction to the arms.
● The right leg should swing in the opposite direction to the left leg.
● Move the pivot point to slightly above the top of the leg with a Y-axis value of -5%.
Remember that the DevTools Elements
panel will show when a CSS rule cannot
be applied due to a syntax error. Styles
with these errors will be crossed-out
and have an alert icon.
Hover your mouse over the error icon to
see whether the mistake is in the
property name or value. The relevant
line number for the style shown to the
right of the CSS file name.
17
学霸联盟
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
Beaumont and the contributing artists at http://www.cubeecraft.com. Cubeecraft has
hundreds of designs dating back to 2008. 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:
div> 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.
1. Set up variables and event handling
Open the 3d-scene.js file in your editor. Comment out the existing code to disable it.
We will write new rotation code, but some principles you learned previously will be used.
Begin with 2 new variable declarations to cache the elements that we will be using. The
$window will trigger mouse events, and $scene will be the element that rotates.
let $window = $( window );
let $scene = $( '.scene' );
Also declare 2 variables that to keep track of the scene's current rotation angle:
let rX = 0;
let rY = 0;
Like in the previous exercise, mouse movement will trigger rotation. However, this time
the movement will only occur when we click and drag within the 3D scene.
Add event listeners in your script initialisation to detect the mouse button being
pressed and released:
$window.on( 'mousedown', function(){
$window.on( 'mousemove', rotateScene );
} );
$window.on( 'mouseup', function(){
$window.off( 'mousemove', rotateScene );
} );
When the mouse button is pressed down, $window starts listening for mouse
movements and running the rotateScene function. When the mouse button is released,
the listener is removed.
Declare the new rotateScene function in the function definitions.
const rotateScene = function ( event ) {
}
Test the page, checking the DevTools Console to make sure there are no errors.
4
Interactive Media Studio 2
Week 9: Multi-Object Scenes With CSS 3D
2. Disable image selection and dragging
Even though we have not coded the rotateScene function yet, try dragging the cube
now. You may notice a problem...
Because the faces are img elements, each face is draggable by default. This interferes
with any attempts to use dragging interactions. Luckily, this behaviour can be disabled
using CSS and JavaScript.
In 3d-scene.css, locate the .scene, .object selector and add the following:
userselect: none;
In 3d-scene.js, add the following code in the script initialisation:
$( '.face' ).prop( 'draggable', false );
This will make any elements within the 3D scene non-selectable and all 3D faces
non-draggable.
3. Implement the scene rotation function
The scene rotation code will borrow some ideas from last week's exercise, but will be
much simpler, involving less maths.
When dragging in the browser window, the browser will continuously fire mousemove
events. To rotate a 3D scene as it is being dragged, we need to know how far the mouse
has moved between each mousemove event.
The mouse event data from the mousemove event contains the following properties:
● MouseEvent.movementX positive or negative horizontal movement in pixels
● MouseEvent.movementY positive or negative vertical movement in pixels
Left: clientX/Y are absolute coordinates. Right: movementX/Y are relative to the previous mouse position.
Within the empty rotateScene function, we will take the rX and rY rotation variables
(currently set to 0) and update them by adding the mouse movement distance values.
5
Interactive Media Studio 2
Week 9: Multi-Object Scenes With CSS 3D
For rotation around the Y-axis, we add the horizontal movement:
rY += event.originalEvent.movementX;
And for rotation around the X-axis, we subtract the vertical movement distance:
rX -= event.originalEvent.movementY;
The updated rX and rY values contain the new angles to apply as the rotation of $scene.
Within the rotateScene function, add one final line of code to update the CSS of $scene:
$scene.css( 'transform', 'rotateX('+ rX +'deg) rotateY('+ rY +'deg)' );
This applies a transform property to the scene with the appropriate X and Y-axis
rotations. Save your code and test your page.
You should now be able to drag anywhere within the browser window to rotate the
scene. When the mouse button is released, the rotation will stop and will not be affected
by further mouse movement.
4. Adjust the rotation direction and speed
If the rotation feels too sensitive, you can reduce its speed by dividing the movementX
and movementY values:
rY += event.originalEvent.movementX / 2;
rX -= event.originalEvent.movementY / 2;
You can also experiment with inverting the rotation axis by changing += to -= (or vice
versa).
6
Interactive Media Studio 2
Week 9: Multi-Object Scenes With CSS 3D
Building individual objects using DevTools
Now we can begin constructing each of the boxes for the head, body, arms and legs. With a
working rotation function, we will now be able to inspect objects from all sides to check for
positioning errors.
1. Comment out the cube to use as an object template
We no longer need to show the cube object, but we need to keep the code in a
convenient place so that we can refer to the code as a template for other objects.
In 3d-scene.html, locate the cube object element and add comment tags around it to
disable it.
The CSS code for the cube does not need to be altered at this point.
2. Assembling the head object's faces
Choose one of the 3 characters shown on page 1 of this document. The tutorial folder
has separate subfolders for each character with images for different faces of each body
part.
Note the way that each file is named. For example, Batman's head:
● head-back.png
● head-front.png
● head-left-right.png
● head-top-bottom.png
In this example, head-left-right.png is the image used for both the left and right faces
of the head. The head-top-bottom.png image is used for both the top and bottom. The
file naming will be slightly different for each of the 3 characters. Having a meaningful
naming system for images makes files easier to locate.
7
Interactive Media Studio 2
Week 9: Multi-Object Scenes With CSS 3D
Make a copy of the cube element's HTML code and paste it inside of the scene element,
below the comment. In the class attribute of the object element, replace "cube" with
"head". Also replace each of the images with the appropriate images for your character.
For example:
div>
In 3d-scene.css, locate the 7 selectors for the cube object and its 6 faces. Make an
additional copy of these selectors, changing ".cube" in the selectors to ".head":
.head { width: 300px; height: 300px; }
.head .front { transform: rotateY(0deg) translate3d(0px,0px,150px); }
.head .back { transform: rotateY(180deg) translate3d(0px,0px,150px); }
.head .top { transform: rotateX(90deg) translate3d(0px,0px,150px); }
.head .bottom { transform: rotateX(-90deg) translate3d(0px,0px,150px);}
.head .left { transform: rotateY(-90deg) translate3d(0px,0px,150px); }
.head .right { transform: rotateY(90deg) translate3d(0px,0px,150px); }
Next, we need to set the width and height of the head object. This will be the size of front
or back face images, minus any parts that overhang the box shape.
Above: Excluding overhanging artwork, all of these characters' faces have the same dimensions.
If you are unsure, you can open the image in an image editor and check the size using a
rectangular selection tool. For these characters, set the width and height of the head as
shown below:
.head { width: 300px; height: 210px; }
This will keep the head centred in the browser window. You can now set the Z-axis
translation of each face to 0px. This will give us the following code:
8
Interactive Media Studio 2
Week 9: Multi-Object Scenes With CSS 3D
.head { width: 300px; height: 210px; }
.head .front { transform: rotateY(0deg) translate3d(0px,0px,0px); }
.head .back { transform: rotateY(180deg) translate3d(0px,0px,0px); }
.head .top { transform: rotateX(90deg) translate3d(0px,0px,0px); }
.head .bottom { transform: rotateX(-90deg) translate3d(0px,0px,0px); }
.head .left { transform: rotateY(-90deg) translate3d(0px,0px,0px); }
.head .right { transform: rotateY(90deg) translate3d(0px,0px,0px); }
Save both the HTML and CSS files before testing the page.
The 6 faces will be correctly oriented and positioned intersecting the object.
Above: The faces are oriented but not yet translated. Object container size matches the front face.
Instead of manually setting the position of each face in the CSS file, we can use the
DevTools Elements panel to assist us.
3. Setting position transform values using DevTools
In your browser window, right-click on any of the object's faces and select Inspect. This
will open the DevTools Elements panel - check it to see which face you have selected.
In the Styles pane, locate the selector for the selected face's transform property and
double-click the value to edit it. Place your text cursor in the 3rd value of the
translate3d() function. This is the Z-axis translation.
9
Interactive Media Studio 2
Week 9: Multi-Object Scenes With CSS 3D
Instead of typing a value, you can use the up/down arrow keys on your keyboard to
adjust the value. The object will update in the browser window in real-time.
● Up and Down to change the value by 1px
● Shift+Up and Shift+Down to change the value by 10px
● Ctrl+Up and Ctrl+Down to change the value by 100px
● Alt+Up and Alt+Down to change the value by 0.1px
● You can also scroll your mouse wheel instead of using the arrow keys.
Zoom in in your browser (Ctrl and +) for a closer view of the 3D construction.
Help! My scene rotation is stuck!
While working in the Styles pane, the scene's drag-to-rotate function may stop working. If
this happens, just reselect the element in the element inspector panel.
Using this method, adjust the positioning of the face. Until it is in the correct position.
When done, select another face and repeat the process. Position all 6 faces, rotating the
object to check that the positioning is correct on all 6 sides.
Remember that translation values on the Z-axis should be positive measurements.
When you are done positioning the faces, the final CSS styles need to be copied from
DevTools back to your 3d-scene.css file.
In the Styles pane, locate the CSS file link that appears to the right of CSS selectors:
Click on the link to open the file in the Sources panel. The alert icon in the tab of the file
indicates that there are unsaved changes in the 3d-scene.css file.
10
Interactive Media Studio 2
Week 9: Multi-Object Scenes With CSS 3D
Select all of the CSS code and copy it. Return to the 3d-scene.css file in your code editor
and select all of the CSS code and paste. This will replace all of the code in the editor
with code copied from DevTools.
Save the CSS file and reload the page in your browser. The edits face positioning edits
made in DevTools are now permanently saved.
4. Building the other body parts
When you are happy with how the head looks, go back to the HTML file and add
comment marks around the head to hide it.
Make a new copy of the cube's HTML and CSS and repeat the previous steps to create
the character's body, left arm and left leg. Remember to set the width and height for
each object container element.
Currently we only have the left arm and left leg. Instead of building the right arm and leg
separately, we can make a copy of the existing body part and flip it horizontally.
In the HTML file, make a copy of the arm object's HTML. In the copied arm, modify the
class name to indicate that it is the right arm:
In the CSS file, create a new selector that selects the right arm only. In this selector, set a
transform that uses scaleX to flip the object along the X-axis:
.arm.right { transform: scaleX( -1 ); }
Repeat this process to create the right leg as well.
11
Interactive Media Studio 2
Week 9: Multi-Object Scenes With CSS 3D
Assembling objects in a scene
Now we have the pieces for our 3D character. Test the page in your browser and you will see
something unusual. The body parts are stacked in a single column (because div elements
normally stack vertically).
1. Setting the initial starting position for all objects
Absolute positioning will allow each object to be moved without affecting other objects
in the scene.
In the CSS file, create a new selector for the object class and use it to set all objects to
use absolute positioning:
.object { position: absolute; }
This positions all objects with their top-left corner in the centre of the screen. This is
because the scene is centred with no width or height.
Fix this by creating a new .scene selector and setting the width and height to match the
approximate size (or exact size, if you can calculate it) of the final assembled model.
.scene { width: 300px; height: 500px; }
Hint: Add together the heights of the head, body and leg
elements to calculate the exact height of the assembled
scene.
Save the code and reload the page. The objects should now
be repositioned, with the head sitting in an appropriate
position.
2. Preparing to position each object
At this point, every object is positioned in the top-left corner
12
Interactive Media Studio 2
Week 9: Multi-Object Scenes With CSS 3D
of the scene. This is the correct position for the head. The other objects will need to be
re-positioned using translate3d().
In the CSS file, add a transform property to each object's selector (except for the head,
which is already correctly positioned). Start with the body object:
.body {
width:200px; height:200px;
transform: translate3d( 0px, 0px, 0px );
}
Repeat this for the left arm and left leg. The right arm and right leg already have
transform properties, so just append translate3d() to the existing property, after the
scaleX() function:
.arm.right { transform: scaleX( -1 ) translate3d( 0px, 0px, 0px ); }
.leg.right { transform: scaleX( -1 ) translate3d( 0px, 0px, 0px ); }
3. Adjust the position of each object
Each object can now be positioned using the same technique that we used to position
the individual object faces.
Open the DevTools Elements panel and locate the div element for the character's body.
In the Styles panel, select the .body selector's translate3d() function and adjust the first
and second values (X and Y-axis translation) to position the body directly underneath
the head. You may need to rotate the scene in your browser window to make sure the
objects are perfectly aligned.
13
Interactive Media Studio 2
Week 9: Multi-Object Scenes With CSS 3D
Repeat this process for the arms and legs. The final translate3d values for each object
are shown below. Copy the final styles from the Sources panel back to your CSS file.
.body {
width:200px; height:200px;
transform: translate3d( 50px, 210px, 0px );
}
.arm {
width:70px; height:140px;
transform: translate3d( -20px, 230px, 0px );
}
.leg {
width:70px; height:90px;
transform: translate3d( 70px, 410px, 0px );
}
.arm.right { transform: scaleX(-1) translate3d(-250px, 230px, 0px); }
.leg.right { transform: scaleX(-1) translate3d(-160px, 410px, 0px); }
Your translate3d() measurements may be slightly different if you are creating one of
the other 2 characters, or just prefer slightly different positioning of body parts.
Rotate the scene to check that everything is aligned correctly and that no body parts
are intersecting. Make small adjustments to the measurements if necessary.
If you notice that the scene is not perfectly centred in the browser window, adjust the
width and height properties of the scene element. Make these adjustments in the
element inspector and copy the styles back to your CSS file.
14
Interactive Media Studio 2
Week 9: Multi-Object Scenes With CSS 3D
Animating the body parts
To animate the character, we can use CSS keyframe animations to change the transform
properties of different body parts. You can also use transitions for interactive animations that
run once.
1. Animate a turning head
The head will be the simplest object to animate because it does not have any transform
property applied to it yet. In the .head selector, add the following animation property:
.head {
width:300px; height:210px;
animation: 5s turnhead easeinout infnite alternate;
}
Add a set of keyframes to rotates the head slightly from side to side:
@keyframes turnhead {
0% { transform: rotateY( 10deg ); }
100% { transform: rotateY( -10deg ); }
}
2. Animate a swinging arm
When animating the limbs, we need to be more careful as these objects already have
transform properties that set the position of the limbs. In the .arm selector, add an
animation property:
.arm {
width:70px; height:140px;
transform: translate3d( -20px, 230px, 0px );
animation: 1s swingarm easeinout infnite alternate;
}
Add a set of keyframes for the swing-arm animation. This time copy the existing
15
Interactive Media Studio 2
Week 9: Multi-Object Scenes With CSS 3D
transform property from the .arm selector and append the rotation changes to it:
@keyframes swingarm {
0% { transform: translate3d(-20px, 230px, 0px) rotateX( 45deg ); }
100% { transform: translate3d(-20px, 230px, 0px) rotateX( -45deg ); }
}
Note: this animation also overrides the right arm’s position. This will be fixed later.
3. Setting the arm's pivot point
This swing-arm animation currently pivots the arm around its centre instead of at the
top where the character's shoulder joint would be.
To adjust the position of the pivot, set a transform-origin property in the .arm selector:
.arm {
width:70px; height:140px;
transform: translate3d( -20px, 230px, 0px );
animation: 1s swingarm easeinout infnite alternate;
transformorigin: 50% 5% 0px;
}
The arm's pivot point can be adjusted on 3 axes:
● The first value (50%) sets it to the middle of the X-axis (50% is the default value).
● The second value (5%) sets it near the top of the Y-axis (top of the arm).
● The third value (0px) is the Z-axis position and cannot be a percentage.
16
Interactive Media Studio 2
Week 9: Multi-Object Scenes With CSS 3D
4. Animating the right arm
After we added an animation to the left arm, the right arm disappeared. This is due to
the transform properties in the swing-arm animation overriding the transform
properties in the .arm.right selector. We can correct this by giving the right arm its own
animation.
The process is the same as the left arm. Start by adding an animation to the .arm.right
selector:
.arm.right {
transform: scaleX( -1 ) translate3d( -250px, 230px, 0px );
animation: 1s swingarmright easeinout infnite alternate;
}
Create a set of keyframes for the swing-arm-right animation using the transform
property from .arm.right as a starting point for both keyframes.
@keyframes swingarmright {
0% { transform: scaleX(-1) translate3d(-250px, 230px, 0px)
rotateX(-45deg); }
100% { transform: scaleX(-1) translate3d(-250px, 230px, 0px)
rotateX(45deg); }
}
Note that the right arm should swing in the opposite direction compared to the left arm,
so this animation begins at -45deg, ending at 45deg.
Save the code and test the animation.
5. Challenge: Animate the legs
Can you complete the exercise by creating animations for both legs?
● The technique will be the same as the technique used to animate the arms.
● The legs should swing in the opposite direction to the arms.
● The right leg should swing in the opposite direction to the left leg.
● Move the pivot point to slightly above the top of the leg with a Y-axis value of -5%.
Remember that the DevTools Elements
panel will show when a CSS rule cannot
be applied due to a syntax error. Styles
with these errors will be crossed-out
and have an alert icon.
Hover your mouse over the error icon to
see whether the mistake is in the
property name or value. The relevant
line number for the style shown to the
right of the CSS file name.
div> 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.
1. Set up variables and event handling
Open the 3d-scene.js file in your editor. Comment out the existing code to disable it.
We will write new rotation code, but some principles you learned previously will be used.
Begin with 2 new variable declarations to cache the elements that we will be using. The
$window will trigger mouse events, and $scene will be the element that rotates.
let $window = $( window );
let $scene = $( '.scene' );
Also declare 2 variables that to keep track of the scene's current rotation angle:
let rX = 0;
let rY = 0;
Like in the previous exercise, mouse movement will trigger rotation. However, this time
the movement will only occur when we click and drag within the 3D scene.
Add event listeners in your script initialisation to detect the mouse button being
pressed and released:
$window.on( 'mousedown', function(){
$window.on( 'mousemove', rotateScene );
} );
$window.on( 'mouseup', function(){
$window.off( 'mousemove', rotateScene );
} );
When the mouse button is pressed down, $window starts listening for mouse
movements and running the rotateScene function. When the mouse button is released,
the listener is removed.
Declare the new rotateScene function in the function definitions.
const rotateScene = function ( event ) {
}
Test the page, checking the DevTools Console to make sure there are no errors.
4
Interactive Media Studio 2
Week 9: Multi-Object Scenes With CSS 3D
2. Disable image selection and dragging
Even though we have not coded the rotateScene function yet, try dragging the cube
now. You may notice a problem...
Because the faces are img elements, each face is draggable by default. This interferes
with any attempts to use dragging interactions. Luckily, this behaviour can be disabled
using CSS and JavaScript.
In 3d-scene.css, locate the .scene, .object selector and add the following:
userselect: none;
In 3d-scene.js, add the following code in the script initialisation:
$( '.face' ).prop( 'draggable', false );
This will make any elements within the 3D scene non-selectable and all 3D faces
non-draggable.
3. Implement the scene rotation function
The scene rotation code will borrow some ideas from last week's exercise, but will be
much simpler, involving less maths.
When dragging in the browser window, the browser will continuously fire mousemove
events. To rotate a 3D scene as it is being dragged, we need to know how far the mouse
has moved between each mousemove event.
The mouse event data from the mousemove event contains the following properties:
● MouseEvent.movementX positive or negative horizontal movement in pixels
● MouseEvent.movementY positive or negative vertical movement in pixels
Left: clientX/Y are absolute coordinates. Right: movementX/Y are relative to the previous mouse position.
Within the empty rotateScene function, we will take the rX and rY rotation variables
(currently set to 0) and update them by adding the mouse movement distance values.
5
Interactive Media Studio 2
Week 9: Multi-Object Scenes With CSS 3D
For rotation around the Y-axis, we add the horizontal movement:
rY += event.originalEvent.movementX;
And for rotation around the X-axis, we subtract the vertical movement distance:
rX -= event.originalEvent.movementY;
The updated rX and rY values contain the new angles to apply as the rotation of $scene.
Within the rotateScene function, add one final line of code to update the CSS of $scene:
$scene.css( 'transform', 'rotateX('+ rX +'deg) rotateY('+ rY +'deg)' );
This applies a transform property to the scene with the appropriate X and Y-axis
rotations. Save your code and test your page.
You should now be able to drag anywhere within the browser window to rotate the
scene. When the mouse button is released, the rotation will stop and will not be affected
by further mouse movement.
4. Adjust the rotation direction and speed
If the rotation feels too sensitive, you can reduce its speed by dividing the movementX
and movementY values:
rY += event.originalEvent.movementX / 2;
rX -= event.originalEvent.movementY / 2;
You can also experiment with inverting the rotation axis by changing += to -= (or vice
versa).
6
Interactive Media Studio 2
Week 9: Multi-Object Scenes With CSS 3D
Building individual objects using DevTools
Now we can begin constructing each of the boxes for the head, body, arms and legs. With a
working rotation function, we will now be able to inspect objects from all sides to check for
positioning errors.
1. Comment out the cube to use as an object template
We no longer need to show the cube object, but we need to keep the code in a
convenient place so that we can refer to the code as a template for other objects.
In 3d-scene.html, locate the cube object element and add comment tags around it to
disable it.
The CSS code for the cube does not need to be altered at this point.
2. Assembling the head object's faces
Choose one of the 3 characters shown on page 1 of this document. The tutorial folder
has separate subfolders for each character with images for different faces of each body
part.
Note the way that each file is named. For example, Batman's head:
● head-back.png
● head-front.png
● head-left-right.png
● head-top-bottom.png
In this example, head-left-right.png is the image used for both the left and right faces
of the head. The head-top-bottom.png image is used for both the top and bottom. The
file naming will be slightly different for each of the 3 characters. Having a meaningful
naming system for images makes files easier to locate.
7
Interactive Media Studio 2
Week 9: Multi-Object Scenes With CSS 3D
Make a copy of the cube element's HTML code and paste it inside of the scene element,
below the comment. In the class attribute of the object element, replace "cube" with
"head". Also replace each of the images with the appropriate images for your character.
For example:
div>
In 3d-scene.css, locate the 7 selectors for the cube object and its 6 faces. Make an
additional copy of these selectors, changing ".cube" in the selectors to ".head":
.head { width: 300px; height: 300px; }
.head .front { transform: rotateY(0deg) translate3d(0px,0px,150px); }
.head .back { transform: rotateY(180deg) translate3d(0px,0px,150px); }
.head .top { transform: rotateX(90deg) translate3d(0px,0px,150px); }
.head .bottom { transform: rotateX(-90deg) translate3d(0px,0px,150px);}
.head .left { transform: rotateY(-90deg) translate3d(0px,0px,150px); }
.head .right { transform: rotateY(90deg) translate3d(0px,0px,150px); }
Next, we need to set the width and height of the head object. This will be the size of front
or back face images, minus any parts that overhang the box shape.
Above: Excluding overhanging artwork, all of these characters' faces have the same dimensions.
If you are unsure, you can open the image in an image editor and check the size using a
rectangular selection tool. For these characters, set the width and height of the head as
shown below:
.head { width: 300px; height: 210px; }
This will keep the head centred in the browser window. You can now set the Z-axis
translation of each face to 0px. This will give us the following code:
8
Interactive Media Studio 2
Week 9: Multi-Object Scenes With CSS 3D
.head { width: 300px; height: 210px; }
.head .front { transform: rotateY(0deg) translate3d(0px,0px,0px); }
.head .back { transform: rotateY(180deg) translate3d(0px,0px,0px); }
.head .top { transform: rotateX(90deg) translate3d(0px,0px,0px); }
.head .bottom { transform: rotateX(-90deg) translate3d(0px,0px,0px); }
.head .left { transform: rotateY(-90deg) translate3d(0px,0px,0px); }
.head .right { transform: rotateY(90deg) translate3d(0px,0px,0px); }
Save both the HTML and CSS files before testing the page.
The 6 faces will be correctly oriented and positioned intersecting the object.
Above: The faces are oriented but not yet translated. Object container size matches the front face.
Instead of manually setting the position of each face in the CSS file, we can use the
DevTools Elements panel to assist us.
3. Setting position transform values using DevTools
In your browser window, right-click on any of the object's faces and select Inspect. This
will open the DevTools Elements panel - check it to see which face you have selected.
In the Styles pane, locate the selector for the selected face's transform property and
double-click the value to edit it. Place your text cursor in the 3rd value of the
translate3d() function. This is the Z-axis translation.
9
Interactive Media Studio 2
Week 9: Multi-Object Scenes With CSS 3D
Instead of typing a value, you can use the up/down arrow keys on your keyboard to
adjust the value. The object will update in the browser window in real-time.
● Up and Down to change the value by 1px
● Shift+Up and Shift+Down to change the value by 10px
● Ctrl+Up and Ctrl+Down to change the value by 100px
● Alt+Up and Alt+Down to change the value by 0.1px
● You can also scroll your mouse wheel instead of using the arrow keys.
Zoom in in your browser (Ctrl and +) for a closer view of the 3D construction.
Help! My scene rotation is stuck!
While working in the Styles pane, the scene's drag-to-rotate function may stop working. If
this happens, just reselect the element in the element inspector panel.
Using this method, adjust the positioning of the face. Until it is in the correct position.
When done, select another face and repeat the process. Position all 6 faces, rotating the
object to check that the positioning is correct on all 6 sides.
Remember that translation values on the Z-axis should be positive measurements.
When you are done positioning the faces, the final CSS styles need to be copied from
DevTools back to your 3d-scene.css file.
In the Styles pane, locate the CSS file link that appears to the right of CSS selectors:
Click on the link to open the file in the Sources panel. The alert icon in the tab of the file
indicates that there are unsaved changes in the 3d-scene.css file.
10
Interactive Media Studio 2
Week 9: Multi-Object Scenes With CSS 3D
Select all of the CSS code and copy it. Return to the 3d-scene.css file in your code editor
and select all of the CSS code and paste. This will replace all of the code in the editor
with code copied from DevTools.
Save the CSS file and reload the page in your browser. The edits face positioning edits
made in DevTools are now permanently saved.
4. Building the other body parts
When you are happy with how the head looks, go back to the HTML file and add
comment marks around the head to hide it.
Make a new copy of the cube's HTML and CSS and repeat the previous steps to create
the character's body, left arm and left leg. Remember to set the width and height for
each object container element.
Currently we only have the left arm and left leg. Instead of building the right arm and leg
separately, we can make a copy of the existing body part and flip it horizontally.
In the HTML file, make a copy of the arm object's HTML. In the copied arm, modify the
class name to indicate that it is the right arm:
In the CSS file, create a new selector that selects the right arm only. In this selector, set a
transform that uses scaleX to flip the object along the X-axis:
.arm.right { transform: scaleX( -1 ); }
Repeat this process to create the right leg as well.
11
Interactive Media Studio 2
Week 9: Multi-Object Scenes With CSS 3D
Assembling objects in a scene
Now we have the pieces for our 3D character. Test the page in your browser and you will see
something unusual. The body parts are stacked in a single column (because div elements
normally stack vertically).
1. Setting the initial starting position for all objects
Absolute positioning will allow each object to be moved without affecting other objects
in the scene.
In the CSS file, create a new selector for the object class and use it to set all objects to
use absolute positioning:
.object { position: absolute; }
This positions all objects with their top-left corner in the centre of the screen. This is
because the scene is centred with no width or height.
Fix this by creating a new .scene selector and setting the width and height to match the
approximate size (or exact size, if you can calculate it) of the final assembled model.
.scene { width: 300px; height: 500px; }
Hint: Add together the heights of the head, body and leg
elements to calculate the exact height of the assembled
scene.
Save the code and reload the page. The objects should now
be repositioned, with the head sitting in an appropriate
position.
2. Preparing to position each object
At this point, every object is positioned in the top-left corner
12
Interactive Media Studio 2
Week 9: Multi-Object Scenes With CSS 3D
of the scene. This is the correct position for the head. The other objects will need to be
re-positioned using translate3d().
In the CSS file, add a transform property to each object's selector (except for the head,
which is already correctly positioned). Start with the body object:
.body {
width:200px; height:200px;
transform: translate3d( 0px, 0px, 0px );
}
Repeat this for the left arm and left leg. The right arm and right leg already have
transform properties, so just append translate3d() to the existing property, after the
scaleX() function:
.arm.right { transform: scaleX( -1 ) translate3d( 0px, 0px, 0px ); }
.leg.right { transform: scaleX( -1 ) translate3d( 0px, 0px, 0px ); }
3. Adjust the position of each object
Each object can now be positioned using the same technique that we used to position
the individual object faces.
Open the DevTools Elements panel and locate the div element for the character's body.
In the Styles panel, select the .body selector's translate3d() function and adjust the first
and second values (X and Y-axis translation) to position the body directly underneath
the head. You may need to rotate the scene in your browser window to make sure the
objects are perfectly aligned.
13
Interactive Media Studio 2
Week 9: Multi-Object Scenes With CSS 3D
Repeat this process for the arms and legs. The final translate3d values for each object
are shown below. Copy the final styles from the Sources panel back to your CSS file.
.body {
width:200px; height:200px;
transform: translate3d( 50px, 210px, 0px );
}
.arm {
width:70px; height:140px;
transform: translate3d( -20px, 230px, 0px );
}
.leg {
width:70px; height:90px;
transform: translate3d( 70px, 410px, 0px );
}
.arm.right { transform: scaleX(-1) translate3d(-250px, 230px, 0px); }
.leg.right { transform: scaleX(-1) translate3d(-160px, 410px, 0px); }
Your translate3d() measurements may be slightly different if you are creating one of
the other 2 characters, or just prefer slightly different positioning of body parts.
Rotate the scene to check that everything is aligned correctly and that no body parts
are intersecting. Make small adjustments to the measurements if necessary.
If you notice that the scene is not perfectly centred in the browser window, adjust the
width and height properties of the scene element. Make these adjustments in the
element inspector and copy the styles back to your CSS file.
14
Interactive Media Studio 2
Week 9: Multi-Object Scenes With CSS 3D
Animating the body parts
To animate the character, we can use CSS keyframe animations to change the transform
properties of different body parts. You can also use transitions for interactive animations that
run once.
1. Animate a turning head
The head will be the simplest object to animate because it does not have any transform
property applied to it yet. In the .head selector, add the following animation property:
.head {
width:300px; height:210px;
animation: 5s turnhead easeinout infnite alternate;
}
Add a set of keyframes to rotates the head slightly from side to side:
@keyframes turnhead {
0% { transform: rotateY( 10deg ); }
100% { transform: rotateY( -10deg ); }
}
2. Animate a swinging arm
When animating the limbs, we need to be more careful as these objects already have
transform properties that set the position of the limbs. In the .arm selector, add an
animation property:
.arm {
width:70px; height:140px;
transform: translate3d( -20px, 230px, 0px );
animation: 1s swingarm easeinout infnite alternate;
}
Add a set of keyframes for the swing-arm animation. This time copy the existing
15
Interactive Media Studio 2
Week 9: Multi-Object Scenes With CSS 3D
transform property from the .arm selector and append the rotation changes to it:
@keyframes swingarm {
0% { transform: translate3d(-20px, 230px, 0px) rotateX( 45deg ); }
100% { transform: translate3d(-20px, 230px, 0px) rotateX( -45deg ); }
}
Note: this animation also overrides the right arm’s position. This will be fixed later.
3. Setting the arm's pivot point
This swing-arm animation currently pivots the arm around its centre instead of at the
top where the character's shoulder joint would be.
To adjust the position of the pivot, set a transform-origin property in the .arm selector:
.arm {
width:70px; height:140px;
transform: translate3d( -20px, 230px, 0px );
animation: 1s swingarm easeinout infnite alternate;
transformorigin: 50% 5% 0px;
}
The arm's pivot point can be adjusted on 3 axes:
● The first value (50%) sets it to the middle of the X-axis (50% is the default value).
● The second value (5%) sets it near the top of the Y-axis (top of the arm).
● The third value (0px) is the Z-axis position and cannot be a percentage.
16
Interactive Media Studio 2
Week 9: Multi-Object Scenes With CSS 3D
4. Animating the right arm
After we added an animation to the left arm, the right arm disappeared. This is due to
the transform properties in the swing-arm animation overriding the transform
properties in the .arm.right selector. We can correct this by giving the right arm its own
animation.
The process is the same as the left arm. Start by adding an animation to the .arm.right
selector:
.arm.right {
transform: scaleX( -1 ) translate3d( -250px, 230px, 0px );
animation: 1s swingarmright easeinout infnite alternate;
}
Create a set of keyframes for the swing-arm-right animation using the transform
property from .arm.right as a starting point for both keyframes.
@keyframes swingarmright {
0% { transform: scaleX(-1) translate3d(-250px, 230px, 0px)
rotateX(-45deg); }
100% { transform: scaleX(-1) translate3d(-250px, 230px, 0px)
rotateX(45deg); }
}
Note that the right arm should swing in the opposite direction compared to the left arm,
so this animation begins at -45deg, ending at 45deg.
Save the code and test the animation.
5. Challenge: Animate the legs
Can you complete the exercise by creating animations for both legs?
● The technique will be the same as the technique used to animate the arms.
● The legs should swing in the opposite direction to the arms.
● The right leg should swing in the opposite direction to the left leg.
● Move the pivot point to slightly above the top of the leg with a Y-axis value of -5%.
Remember that the DevTools Elements
panel will show when a CSS rule cannot
be applied due to a syntax error. Styles
with these errors will be crossed-out
and have an alert icon.
Hover your mouse over the error icon to
see whether the mistake is in the
property name or value. The relevant
line number for the style shown to the
right of the CSS file name.
17
学霸联盟
