2D Euclidean Distance Transform Algorithms: A Comparative Survey
CSS3 2D/3D transform
-
Upload
kenny-lee -
Category
Technology
-
view
4.621 -
download
5
description
Transcript of CSS3 2D/3D transform
![Page 1: CSS3 2D/3D transform](https://reader035.fdocuments.in/reader035/viewer/2022081418/5539e2d84a79597c778b4a00/html5/thumbnails/1.jpg)
1
CSS3 Transforms / Transitions / WebGL
KSWLee
![Page 2: CSS3 2D/3D transform](https://reader035.fdocuments.in/reader035/viewer/2022081418/5539e2d84a79597c778b4a00/html5/thumbnails/2.jpg)
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
![Page 3: CSS3 2D/3D transform](https://reader035.fdocuments.in/reader035/viewer/2022081418/5539e2d84a79597c778b4a00/html5/thumbnails/3.jpg)
3
CSS 2D Transform
![Page 4: CSS3 2D/3D transform](https://reader035.fdocuments.in/reader035/viewer/2022081418/5539e2d84a79597c778b4a00/html5/thumbnails/4.jpg)
4
2D transform functions
![Page 5: CSS3 2D/3D transform](https://reader035.fdocuments.in/reader035/viewer/2022081418/5539e2d84a79597c778b4a00/html5/thumbnails/5.jpg)
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
![Page 6: CSS3 2D/3D transform](https://reader035.fdocuments.in/reader035/viewer/2022081418/5539e2d84a79597c778b4a00/html5/thumbnails/6.jpg)
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);
}
![Page 7: CSS3 2D/3D transform](https://reader035.fdocuments.in/reader035/viewer/2022081418/5539e2d84a79597c778b4a00/html5/thumbnails/7.jpg)
7
2D transform-origin
Scale by 2x and move (1, 0.5)
![Page 8: CSS3 2D/3D transform](https://reader035.fdocuments.in/reader035/viewer/2022081418/5539e2d84a79597c778b4a00/html5/thumbnails/8.jpg)
8
2D transform-origin
move (1, 0.5) and Scale by 2x
![Page 9: CSS3 2D/3D transform](https://reader035.fdocuments.in/reader035/viewer/2022081418/5539e2d84a79597c778b4a00/html5/thumbnails/9.jpg)
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 ]
![Page 10: CSS3 2D/3D transform](https://reader035.fdocuments.in/reader035/viewer/2022081418/5539e2d84a79597c778b4a00/html5/thumbnails/10.jpg)
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>])
![Page 11: CSS3 2D/3D transform](https://reader035.fdocuments.in/reader035/viewer/2022081418/5539e2d84a79597c778b4a00/html5/thumbnails/11.jpg)
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>
![Page 12: CSS3 2D/3D transform](https://reader035.fdocuments.in/reader035/viewer/2022081418/5539e2d84a79597c778b4a00/html5/thumbnails/12.jpg)
12
2D transform matrix
A CSS tool website: http://css3.mikeplate.com/http://www.useragentman.com/matrix/
![Page 13: CSS3 2D/3D transform](https://reader035.fdocuments.in/reader035/viewer/2022081418/5539e2d84a79597c778b4a00/html5/thumbnails/13.jpg)
13
Online Applications
http://www.m4html.com/58-Amazing-CSS3-Image-Galleries-Sliders-Animations/
![Page 14: CSS3 2D/3D transform](https://reader035.fdocuments.in/reader035/viewer/2022081418/5539e2d84a79597c778b4a00/html5/thumbnails/14.jpg)
14
Pure CSS3 Page Flip Effect
http://www.romancortes.com/ficheros/page-flip.html
http://www.romancortes.com/ficheros/page-flip.html
![Page 15: CSS3 2D/3D transform](https://reader035.fdocuments.in/reader035/viewer/2022081418/5539e2d84a79597c778b4a00/html5/thumbnails/15.jpg)
15
What does scale(-1) / scale(1, -1) / scale(-1, 1) mean?
![Page 16: CSS3 2D/3D transform](https://reader035.fdocuments.in/reader035/viewer/2022081418/5539e2d84a79597c778b4a00/html5/thumbnails/16.jpg)
16
CSS 3D Transform
![Page 17: CSS3 2D/3D transform](https://reader035.fdocuments.in/reader035/viewer/2022081418/5539e2d84a79597c778b4a00/html5/thumbnails/17.jpg)
17
Browser Compatibility
Browser Support 3D transformInternet Explorer 10?Firefox (Gecko) ?
Opera ?Safari 4.0
Chrome 12iOS / Android All versions
![Page 18: CSS3 2D/3D transform](https://reader035.fdocuments.in/reader035/viewer/2022081418/5539e2d84a79597c778b4a00/html5/thumbnails/18.jpg)
18
CSS 3D Transform Module Level 3
perspectiveperspective-origintransform-style backface-visibility transformtransform-origin
![Page 19: CSS3 2D/3D transform](https://reader035.fdocuments.in/reader035/viewer/2022081418/5539e2d84a79597c778b4a00/html5/thumbnails/19.jpg)
19
Perspective / Perspective-Origin
perspective
perspective-origin
http://www.webkit.org/blog-files/3d-transforms/perspective-by-example.html
![Page 20: CSS3 2D/3D transform](https://reader035.fdocuments.in/reader035/viewer/2022081418/5539e2d84a79597c778b4a00/html5/thumbnails/20.jpg)
20
CSS 3D Transform Module Level 3
perspectiveperspective-origintransform-style backface-visibility transformtransform-origin
![Page 21: CSS3 2D/3D transform](https://reader035.fdocuments.in/reader035/viewer/2022081418/5539e2d84a79597c778b4a00/html5/thumbnails/21.jpg)
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
![Page 22: CSS3 2D/3D transform](https://reader035.fdocuments.in/reader035/viewer/2022081418/5539e2d84a79597c778b4a00/html5/thumbnails/22.jpg)
22
backface-visibility
Backgace-visibility:hidden; Backgace-visibility:visible;
![Page 23: CSS3 2D/3D transform](https://reader035.fdocuments.in/reader035/viewer/2022081418/5539e2d84a79597c778b4a00/html5/thumbnails/23.jpg)
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>)
![Page 24: CSS3 2D/3D transform](https://reader035.fdocuments.in/reader035/viewer/2022081418/5539e2d84a79597c778b4a00/html5/thumbnails/24.jpg)
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
![Page 25: CSS3 2D/3D transform](https://reader035.fdocuments.in/reader035/viewer/2022081418/5539e2d84a79597c778b4a00/html5/thumbnails/25.jpg)
25
What does translate3d(0, 0, 0) do?
![Page 26: CSS3 2D/3D transform](https://reader035.fdocuments.in/reader035/viewer/2022081418/5539e2d84a79597c778b4a00/html5/thumbnails/26.jpg)
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)
![Page 27: CSS3 2D/3D transform](https://reader035.fdocuments.in/reader035/viewer/2022081418/5539e2d84a79597c778b4a00/html5/thumbnails/27.jpg)
27
Carousel Sample
http://desandro.github.com/3dtransforms/examples/carousel-02-dynamic.html
![Page 28: CSS3 2D/3D transform](https://reader035.fdocuments.in/reader035/viewer/2022081418/5539e2d84a79597c778b4a00/html5/thumbnails/28.jpg)
28
Webkit Blog Sample
http://www.webkit.org/blog-files/3d-transforms/morphing-cubes.html
![Page 29: CSS3 2D/3D transform](https://reader035.fdocuments.in/reader035/viewer/2022081418/5539e2d84a79597c778b4a00/html5/thumbnails/29.jpg)
29
3D Transform Application
http://www.satine.org/research/webkit/snowleopard/snowstack.html
![Page 30: CSS3 2D/3D transform](https://reader035.fdocuments.in/reader035/viewer/2022081418/5539e2d84a79597c778b4a00/html5/thumbnails/30.jpg)
30
CSS Transition
![Page 31: CSS3 2D/3D transform](https://reader035.fdocuments.in/reader035/viewer/2022081418/5539e2d84a79597c778b4a00/html5/thumbnails/31.jpg)
31
Browser Compatibility
Browser Support TransitionsInternet Explorer 10 (maybe)Firefox (Gecko) 4.0
Opera 10.5Safari 3.1
Chrome 1.0iOS / Android All versions
![Page 32: CSS3 2D/3D transform](https://reader035.fdocuments.in/reader035/viewer/2022081418/5539e2d84a79597c778b4a00/html5/thumbnails/32.jpg)
32
CSS Transition Module Level 3
Transition on left/background with in 1sec
![Page 33: CSS3 2D/3D transform](https://reader035.fdocuments.in/reader035/viewer/2022081418/5539e2d84a79597c778b4a00/html5/thumbnails/33.jpg)
33
Transition Property
• transition-property – CSS property list, e.g. left top background transform
• transition-duration– 5s | 5000ms
• transition-timing-function• transition-delay
![Page 34: CSS3 2D/3D transform](https://reader035.fdocuments.in/reader035/viewer/2022081418/5539e2d84a79597c778b4a00/html5/thumbnails/34.jpg)
34
transition-timing-function
http://www.the-art-of-web.com/css/timing-function/
![Page 35: CSS3 2D/3D transform](https://reader035.fdocuments.in/reader035/viewer/2022081418/5539e2d84a79597c778b4a00/html5/thumbnails/35.jpg)
35
Auto Reversing Transition
Interrupt here. E.g. :hover pseudo element
![Page 36: CSS3 2D/3D transform](https://reader035.fdocuments.in/reader035/viewer/2022081418/5539e2d84a79597c778b4a00/html5/thumbnails/36.jpg)
36
Transition Events
transitionend
![Page 37: CSS3 2D/3D transform](https://reader035.fdocuments.in/reader035/viewer/2022081418/5539e2d84a79597c778b4a00/html5/thumbnails/37.jpg)
37
Sencha Animator
![Page 38: CSS3 2D/3D transform](https://reader035.fdocuments.in/reader035/viewer/2022081418/5539e2d84a79597c778b4a00/html5/thumbnails/38.jpg)
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
![Page 39: CSS3 2D/3D transform](https://reader035.fdocuments.in/reader035/viewer/2022081418/5539e2d84a79597c778b4a00/html5/thumbnails/39.jpg)
39
Graphics Pipeline
![Page 40: CSS3 2D/3D transform](https://reader035.fdocuments.in/reader035/viewer/2022081418/5539e2d84a79597c778b4a00/html5/thumbnails/40.jpg)
40
2D Example
![Page 41: CSS3 2D/3D transform](https://reader035.fdocuments.in/reader035/viewer/2022081418/5539e2d84a79597c778b4a00/html5/thumbnails/41.jpg)
41
![Page 42: CSS3 2D/3D transform](https://reader035.fdocuments.in/reader035/viewer/2022081418/5539e2d84a79597c778b4a00/html5/thumbnails/42.jpg)
42
THE END