CSS transforms tutorial

This article or section is a stub. It does not yet contain enough information to be considered a real article. In other words, it is a short or insufficient piece of information and requires additions.

Draft

Web technology tutorials series
Beginners

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[edit | edit source]

“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[edit | edit source]

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

Translation and rotation[edit | edit source]

<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[edit | edit source]

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[edit | edit source]

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