CSS transforms tutorial

Draft

<pageby nominor="false" comments="false"/>

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 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).

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>

Remarque :

Ce code est en HTML5, mais ne fonctionne qu'avec Firefox, pour que cela fonctionne avec Internet Explorer il faut ajouter les même codes "tranform" mais avec le préfixe "-ms-".

Pour que cela fonctionne avec Safari et Chrome, il faut ajouter les mêmes codes avec le préfixe "-webkit-".

Cela donne donc en tout :

<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>

Remarque : là encore, pour que cela fonctionne avec Safari et Chrome, il faut ajouter le préfixe "-webkit-".

<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

Official

• CSS Transforms, W3C Working Draft 11 September 2012 (as of Aug. 2013)
• CSS Transforms Level 1, Editor's Draft 4 July 2013 (as of Aug 2013)