-
Notifications
You must be signed in to change notification settings - Fork 1
/
transform.html
85 lines (59 loc) · 2.68 KB
/
transform.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
<!DOCTYPE html>
<html>
<head>
<title>CSS3 Webkit Demos</title>
<link href="main.css" media="all" rel="stylesheet" type="text/css" />
<link href='http://fonts.googleapis.com/css?family=Muli' rel='stylesheet' type='text/css'>
<style type="text/css" media="screen">
</style>
</head>
<body>
<div id='header'>
<a href='index.html' class='banner'>CSS3 Webkit Demos</a>
-webkit-transform
</div>
<div id='main'>
<p>The -webkit-transform series of properties are used to apply coordinate transformations to elements in the DOM.</p>
<p>By default, elements are two-dimensional objects, oriented along the X and Y axis of the plane of the web page.
webkit-transform allows you to apply transformations that rotate, translate, scale and skew them, both in the
two dimensional plane and in the third dimension which is orthogonal to the page.</p>
<p>While technologies such as webGL are better suited to complex 3d rendering, the webkit-transform properties
offer a simple way to create impressive 3D visual effects entirely using CSS.
<p style='color: blue'>A panel with simple examples to go here...</p>
<p>Introduction to 2d and 3D graphics here...</p>
</p>
<ul>
<li>-webkit-transform
<li>-webkit-transform-origin
<li>-webkit-transform-origin-x
<li>-webkit-transform-origin-y
<li>-webkit-transform-origin-z
<li>-webkit-transform-style
<li>-webkit-backface-visibility
</ul>
<h2>Details</h2>
<ul>
<li>-webkit-transform
<p>webkit-transform simply says that you want to transform an element in the DOM. The nature of that transformation is passed as the argument(s) to that. The available tranformations are referred to as the Visual Effects Transform Functions</p>
<p><a href="visual_effects_transformation_functions.html">Visual Effects Transform Functions</a></p>
<li>-webkit-transform-origin
<li>-webkit-transform-origin-x
<li>-webkit-transform-origin-y
<li>-webkit-transform-origin-z
<p>-webkit-transform, and its variants, specify the origin within the element to which the transformation will
be applied. The default origin within an element is the center point, i.e. 50% of the width and 50% of the height</p>
<li>-webkit-transform-style
<p></p>
<li>-webkit-backface-visibility
<p>This property applies to elements that have been rotated so as to face away from the viewer.</p>
<p>When set to 'visible' the front face of the element is visible through the element. In other words,
the element is transparent. When set to 'hidden' the element is opaque and so the front face is not visible</p>
</ul>
</div>
<div id='footer'>
Text and Code is released under the terms of the MIT license
<a href="contributors.html">Contributors to this site</a>
</div>
</body>
</html>