1

CSS3 Transforms / Transitions / WebGL

KSWLee

2

CSS Level 3 Modules Status

Both 2D/3D transforms and Transition modules are all still working drafts

http://www.w3.org/Style/CSS/current-work

3

CSS 2D Transform

4

2D transform functions

5

Browser Compatibility

Browser Support 2D transformInternet Explorer 9.0 (DX filter since 5.5)Firefox (Gecko) 3.5 (1.9.1)

Opera 10.5Safari 3.1

Chrome 1.0iOS / Android All versions

6

CSS 2D Transform Module Level 3

transform-origin transform

div

{

transfo

rm-orig

in: 50% 50%;

tra

nsform

: scale(2) tr

anslate(10px, 1

0px);

-w

ebkit-transfo

rm-orig

in: 50% 50%;

-w

ebkit-transfo

rm: sc

ale(2) transla

te(10px, 10px);

}

7

2D transform-origin

Scale by 2x and move (1, 0.5)

8

2D transform-origin

move (1, 0.5) and Scale by 2x

9

2D transform-origin

-ms-transform-origin -moz-transform-origin -webkit-transform-origin -webkit-transform-origin -o-transfomr-origin

Default: 50% 50% (Center of the element box)

Could be: [x% y%] [xpx, ypx] [ left | center | right ] || [ top | center | bottom ]

10

2D transform functions

• matrix(<number>, <number>, <number>, <number>, <number>, <number>)

• translate(<translation-value>[, <translation-value>])• translateX(<translation-value>)• translateY(<translation-value>)• scale(<number>[, <number>])• scaleX(<number>)• scaleY(<number>)• rotate(<angle>)• skewX(<angle>)• skewY(<angle>)• skew(<angle> [, <angle>])

11

2D transform functions – transform group

<div style="transform:translate(-10px,-20px) scale(2) rotate(45deg) translate(5px,10px)"/>

<div style="transform:translate(-10px,-20px)"> <div style="transform:scale(2)"> <div style="transform:rotate(45deg)"> <div style="transform:translate(5px,10px)"> </div> </div> </div></div>

12

2D transform matrix

A CSS tool website: http://css3.mikeplate.com/http://www.useragentman.com/matrix/

13

Online Applications

http://www.m4html.com/58-Amazing-CSS3-Image-Galleries-Sliders-Animations/

14

Pure CSS3 Page Flip Effect

http://www.romancortes.com/ficheros/page-flip.html

http://www.romancortes.com/ficheros/page-flip.html

15

What does scale(-1) / scale(1, -1) / scale(-1, 1) mean?

16

CSS 3D Transform

17

Browser Compatibility

Browser Support 3D transformInternet Explorer 10?Firefox (Gecko) ?

Opera ?Safari 4.0

Chrome 12iOS / Android All versions

18

CSS 3D Transform Module Level 3

perspectiveperspective-origintransform-style backface-visibility transformtransform-origin

19

Perspective / Perspective-Origin

perspective

perspective-origin

http://www.webkit.org/blog-files/3d-transforms/perspective-by-example.html

20

CSS 3D Transform Module Level 3

perspectiveperspective-origintransform-style backface-visibility transformtransform-origin

21

transform-style<div id=‘purple’> <div id=‘green’> </div> <div id=‘yellow’> </div></div>

transform-style:preserve-3d; transform-style:flat;http://www.webkit.org/blog-files/3d-transforms/transform-style.html

22

backface-visibility

Backgace-visibility:hidden; Backgace-visibility:visible;

23

3D transform functions• matrix(<number>, <number>, <number>, <number>, <number>, <number>)

• matrix3d(<number>, <number>, <number>, <number>, <number>, <number>, <number>, <number>, <number>, <number>, <number>, <number>, <number>, <number>, <number>, <number>)

• translate(<translation-value>[, <translation-value>])

• translate3d(<translation-value>, <translation-value>, <translation-value>)• translateX(<translation-value>)• translateY(<translation-value>)

• translateZ(<translation-value>)• scale(<number>[, <number>])

• scale3d(<number>, <number>, <number>)• scaleX(<number>)• scaleY(<number>)

• scaleZ(<number>)• rotate(<angle>)

• rotate3d(<number>, <number>, <number>, <angle>)• rotateX(<angle>)• rotateY(<angle>)• rotateZ(<angle>)• skewX(<angle>)• skewY(<angle>)• skew(<angle> [, <angle>])

• perspective(<number>)

24

matrix3d

1 0 0 tx

0 1 0 ty

0 0 1 tz

0 0 0 1

sx 0 0 1

0 sy 0 1

0 0 sz 1

0 0 0 1

1 0 0 1

0 cosθ -sinθ 1

0 sinθ cosθ 1

0 0 0 1

cosθ -sinθ 0 1

sinθ cosθ 0 1

0 0 1 1

0 0 0 1

cosθ 0 -sinθ 1

0 1 0 1

sinθ 0 cosθ 1

0 0 0 1

Translation matrix

Scale matrix

Rotate about X axis

Rotate about Z axis

Rotate about Y axis

matrix3d(00, 01, 02, 03, 10, 11, 12, 13,20, 21, 22, 23,30, 31, 32, 33)

00 10 20 30

01 11 21 31

02 12 22 32

03 13 23 33

matrix3d

03 = 0, 13 = 0, 23 = 0, 33 = 1

25

What does translate3d(0, 0, 0) do?

26

3D Transform Cube Sample

http://desandro.github.com/3dtransforms/examples/cube-01-steps.html

Front:translateZ(100)Back: translateZ(100) rotateZ(-180deg)Right:translateZ(100) rotateY(90deg)Left:translateZ(100) rotateY(-90deg)Top:translateZ(100) rotateX(90deg)Bottom:translateZ(100) rotateX(-90deg)

27

Carousel Sample

http://desandro.github.com/3dtransforms/examples/carousel-02-dynamic.html

28

Webkit Blog Sample

http://www.webkit.org/blog-files/3d-transforms/morphing-cubes.html

29

3D Transform Application

http://www.satine.org/research/webkit/snowleopard/snowstack.html

30

CSS Transition

31

Browser Compatibility

Browser Support TransitionsInternet Explorer 10 (maybe)Firefox (Gecko) 4.0

Opera 10.5Safari 3.1

Chrome 1.0iOS / Android All versions

32

CSS Transition Module Level 3

Transition on left/background with in 1sec

33

Transition Property

• transition-property – CSS property list, e.g. left top background transform

• transition-duration– 5s | 5000ms

• transition-timing-function• transition-delay

34

transition-timing-function

http://www.the-art-of-web.com/css/timing-function/

35

Auto Reversing Transition

Interrupt here. E.g. :hover pseudo element

36

Transition Events

transitionend

37

Sencha Animator

38

WebGL

• WebGL Spec v1.0 released in Mar, 2011 • Not even a w3c working draft for now • Rely on HTML5 canvas • Security issue found in May, 2011 for denial of

service and cross-domain attacking issues• Chrome 12 natively supports WebGL • FireFox 4.0 requires manual steps to enable

39

Graphics Pipeline

40

2D Example

41

42

THE END