diff options
| author | Simon Wanner <skyrising@pvpctutorials.de> | 2022-03-21 22:26:52 +0100 |
|---|---|---|
| committer | Andreas Kling <kling@serenityos.org> | 2022-03-22 02:06:21 +0100 |
| commit | bc5d39493b9d13bae72fb5932bc218417fbea5a2 (patch) | |
| tree | 99198a2f31ce61f050b2984f5ab6e7e016d49d87 /Base | |
| parent | 4f348f17337a4959e8f2401e1ade0dde759e4a61 (diff) | |
| download | serenity-bc5d39493b9d13bae72fb5932bc218417fbea5a2.zip | |
Base: Add a test page for CSS transforms
This also acts as a little stress test for flexbox layout :^)
Diffstat (limited to 'Base')
| -rw-r--r-- | Base/res/html/misc/transform.html | 169 | ||||
| -rw-r--r-- | Base/res/html/misc/welcome.html | 1 |
2 files changed, 170 insertions, 0 deletions
diff --git a/Base/res/html/misc/transform.html b/Base/res/html/misc/transform.html new file mode 100644 index 0000000000..141dca6501 --- /dev/null +++ b/Base/res/html/misc/transform.html @@ -0,0 +1,169 @@ +<!DOCTYPE html> +<html> +<head> + <meta charset="utf-8"> + <style> + body { + padding: 0; + margin: 0; + } + + .container { + display: inline-flex; + flex-direction: column; + width: 60em; + } + + .example { + display: flex; + align-items: center; + justify-content: space-between; + position: relative; + margin: 4em 5em; + background-color: #ccc; + } + + .example > style { + display: block; + font-family: monospace; + margin: 0 3em 0 10em; + } + + .box { + display: block; + width: 3em; + height: 3em; + border: solid 1px; + background-color: palegreen; + } + + .original { + position: absolute; + left: 0; + top: 0; + opacity: 20%; + } + </style> +</head> +<body> +<p>This is based on the examples for <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin">transform-origin</a> + on MDN</p> +<div class="container"> + <div class="example"> + <div> + <div id="box1" class="box"> </div> + <div class="box original"> </div> + </div> + <style>#box1 { + transform: none; + }</style> + </div> + <div class="example"> + <div> + <div id="box2" class="box"> </div> + <div class="box original"> </div> + </div> + <style>#box2 { + transform: scale(1.7); + }</style> + </div> + <div class="example"> + <div> + <div id="box3" class="box"> </div> + <div class="box original"> </div> + </div> + <style>#box3 { + transform: scale(1.7); + transform-origin: 0 0; + }</style> + </div> + <div class="example"> + <div> + <div id="box4" class="box"> </div> + <div class="box original"> </div> + </div> + <style>#box4 { + transform: scale(1.7); + transform-origin: 100% -30%; + }</style> + </div> + <div class="example"> + <div> + <div id="box5" class="box"> </div> + <div class="box original"> </div> + </div> + <style>#box5 { + transform: translate(20px, 20px); + }</style> + </div> + <div class="example"> + <div> + <div id="box6" class="box"> </div> + <div class="box original"> </div> + </div> + <style>#box6 { + transform: translate(50%, 10%); + }</style> + </div> + <div class="example"> + <div> + <div id="box7" class="box"> </div> + <div class="box original"> </div> + </div> + <style>#box7 { + transform: rotate(30deg); + }</style> + </div> + <div class="example"> + <div> + <div id="box8" class="box"> </div> + <div class="box original"> </div> + </div> + <style>#box8 { + transform: rotate(30deg); + transform-origin: 0 0; + }</style> + </div> + <div class="example"> + <div> + <div id="box9" class="box"> </div> + <div class="box original"> </div> + </div> + <style>#box9 { + transform: rotate(30deg); + transform-origin: 100% 100%; + }</style> + </div> + <div class="example"> + <div> + <div id="box10" class="box"> </div> + <div class="box original"> </div> + </div> + <style>#box10 { + transform: rotate(30deg); + transform-origin: -1em -3em; + }</style> + </div> + <div class="example"> + <div> + <div id="box11" class="box"> </div> + <div class="box original"> </div> + </div> + <style>#box11 { + transform: skewX(50deg); + transform-origin: 100% -30%; + }</style> + </div> + <div class="example"> + <div> + <div id="box12" class="box"> </div> + <div class="box original"> </div> + </div> + <style>#box12 { + transform: skewY(50deg); + transform-origin: 100% -30%; + }</style> + </div> +</div> +</body> +</html> diff --git a/Base/res/html/misc/welcome.html b/Base/res/html/misc/welcome.html index 8937bdb7df..ff3004d19c 100644 --- a/Base/res/html/misc/welcome.html +++ b/Base/res/html/misc/welcome.html @@ -124,6 +124,7 @@ <li><a href="clear-1.html">Float clearing</a></li> <li><a href="overflow.html">Overflow</a></li> <li><a href="image-rendering.html">image-rendering property</a></li> + <li><a href="transform.html">Transforms</a></li> <li><h3>Features</h3></li> <li><a href="css.html">Basic functionality</a></li> <li><a href="colors.html">css colors</a></li> |