CSS transforms tutorial

Draft

Learning goals

• Be able to create simple CSS transforms

Prerequisites

• CSS tutorial

Level and target population

• Beginners

Teaching materials

• Example text: ....

Remarks

• This tutorial is intended for students in educational technology or any other field that is technology intensive. For people who need less, there exist many easy CSS tutorials on the web. This text is intended for students who also must learn principles and who are willing to learn CSS by doing a project, looking at CSS code and online reference manuals.
• Ideally, a teacher also should assign a text formatting task, during or before assigning this tutorial for reading).

Introduction

“CSS transforms allows elements styled with CSS to be transformed in two-dimensional or three-dimensional space. This (future) specification is the convergence of the CSS 2D transforms, CSS 3D transforms and SVG transforms specifications.

The CSS visual formatting model describes a coordinate system within each element is positioned. Positions and sizes in this coordinate space can be thought of as being expressed in pixels, starting in the origin of point with positive values proceeding to the right and down. This coordinate space can be modified with the transform property [plus some "helper" properties]. Using transform, elements can be translated, rotated and scaled in two or three dimensional space.” CSS Transforms, retrieved Aug 27, 2013).

CSS transforms specifications are (as of April 2018):

• CSS Transforms Module Level 1, W3C Working Draft, 30 November 2017

Of course, transforms then can be used to create Flash-like animations...

Simple examples

All, slightly modified, from the specification (Aug 2013 version)

Translation and rotation

<div style="background-color:blue; height: 100px; width: 100px; transform-origin: 50px 50px; transform: translate(50px, 20px) rotate(45deg);"></div>

Remark :

This method works only in relatively recent browsers, in order for it to work with old versions of Internet Explorer, one have to add the "-ms-" prefix and the "-webkit-" prefix for it to work with old Safari and Chrome browsers.

The following code allows dealing with older legacy browsers:

<div style="background-color:blue; height: 100px; width: 100px; transform-origin: 50px 50px; transform: translate(50px, 20px) rotate(45deg); -ms-transform-origin: 50px 50px; -ms-transform: translate(50px, 20px) rotate(45deg); -webkit-transform-origin: 50px 50px; -webkit-transform: translate(50px, 20px) rotate(45deg);"></div>

Adding perspective

This example shows how to use perspective. In addition, we do a 3D rotation around the Y-axis using the rotateY() function.

<div style="background-color:lightgrey; height:100px; width:100px; perspective: 500px; border: 1px solid black;">
 <div style="background-color:blue; height: 100px; width: 100px; transform-origin: 50px 50px; transform: rotateY(45deg) rotate(45deg);"></div>
</div>

Once again, for this method to work with old Safari and Chrome editions, add the "-webkit-" prefix.

<div style="background-color:lightgrey; height:100px; width:100px; perspective: 500px; border: 1px solid black;">
 <div style="background-color:blue; height: 100px; width: 100px; transform-origin: 50px 50px; transform: rotateY(45deg) rotate(45deg); -webkit-transform-origin: 50px 50px; -webkit-transform: rotateY(45deg) rotate(45deg);"></div>

Links

Tutorials and demos

• transform (MDN)
• CSS 2D Transforms (W3C Schools)
• CSS 3D Transforms (W3C)

Official

• List of various CSS specifications completed or in progress. As of April 2018, there are many.
• CSS Transforms, W3C Working Draft, 30 November 2017
• CSS Transforms Level 1, Editor’s Draft, 14 January 2018