Assignment 3
CSS Transforms and Animation
In this assignment, you will use CSS transforms to make a three-dimensional drawing and CSS animation to set it in motion.
Drawing
Using shapes coded with CSS or SVG, create a three-dimensional drawing (other than a cube) of an abstract or representational form. Your drawing should employ CSS transforms with 3D perspective to create at least six shapes that exist on the X, Y, and Z axes. Taken together, these shapes can create an abstract polyhedron or a representational form such as a bird, tree, flower, or building. The drawing should be created exclusively with HTML, CSS, and SVG and, as usual, must be designed and coded by you.
Animation
Once you’ve completed the drawing, animate it using the CSS @keyframes rule. You may choose to animate the entire drawing or isolated aspects of it. You might also animate multiple copies of your original drawing to create a more scenic effect in the browser window. Finally, add a CSS transition in response to a user gesture such as the :hover or :active peudoclasses.
Beyond these requirements, feel free to add additional CSS and/or raster graphics to complete your drawing.
Submitting Your Assignment
Update the project link from your portfolio page and submit the following via NYU Brightspace.
- The URL to your assignment in the general form of: i6.cims.nyu.edu/~netid/drawing/
- A compressed archive of your project files (including the HTML, CSS, SVG, and any image resources)
Please note that you are required to submit files along with URLs in order to receive credit for your work.
Grading
This assignment is worth 10 points.
- A new web page with a custom CSS drawing (1 point)
- The drawing should employ three-dimensional CSS transforms with perspective (2 points)
- The drawing should include at least six CSS or SVG shapes (3 points)
- The drawing should be animated with the
@keyframesrule (3 points) - The drawing should include a CSS transition in response to a user gesture (1 point)