| Index: LayoutTests/transforms/transform-properties-mixed.html
|
| diff --git a/LayoutTests/transforms/transform-properties-mixed.html b/LayoutTests/transforms/transform-properties-mixed.html
|
| new file mode 100644
|
| index 0000000000000000000000000000000000000000..1d1cab136cbd10635007303340f5c73fc2871eed
|
| --- /dev/null
|
| +++ b/LayoutTests/transforms/transform-properties-mixed.html
|
| @@ -0,0 +1,87 @@
|
| +<!DOCTYPE html>
|
| +<style>
|
| +.container {
|
| + width: 200px;
|
| + height: 200px;
|
| + margin: 75px 0 0 75px;
|
| + border: none;
|
| +}
|
| +.cube {
|
| + width: 100%;
|
| + height: 100%;
|
| + backface-visibility: visible;
|
| + perspective-origin: 150% 150%;
|
| + transform-style: preserve-3d;
|
| + perspective: 500px;
|
| +}
|
| +.face {
|
| + display: block;
|
| + position: absolute;
|
| + width: 100px;
|
| + height: 100px;
|
| + border: none;
|
| + line-height: 100px;
|
| + font-family: sans-serif;
|
| + font-size: 60px;
|
| + color: white;
|
| + text-align: center;
|
| +}
|
| +.front {
|
| + background: rgba(0, 0, 0, 0.3);
|
| + translate: 0 0 50px;
|
| +}
|
| +.back {
|
| + background: rgba(0, 255, 0, 1);
|
| + color: black;
|
| + translate: 0 0 -50px;
|
| + rotate: 180deg 0 1 0;
|
| +}
|
| +.right {
|
| + background: rgba(196, 0, 0, 0.7);
|
| + translate: 50px 0 0;
|
| + rotate: 90deg 0 1 0;
|
| +}
|
| +.left {
|
| + background: rgba(0, 0, 196, 0.7);
|
| + translate: -50px 0 0;
|
| + rotate: -90deg 0 1 0;
|
| +}
|
| +.top {
|
| + background: rgba(196, 196, 0, 0.7);
|
| + translate: 0 -50px 0;
|
| + rotate: 90deg 1 0 0;
|
| +}
|
| +.bottom {
|
| + background: rgba(196, 0, 196, 0.7);
|
| + translate: 0 50px 0;
|
| + rotate: -90deg 1 0 0;
|
| +}
|
| +.scaleX {
|
| + scale: 0.5 1.0 1.0;
|
| +}
|
| +.scaleY {
|
| + scale: 1.0 0.5 1.0;
|
| +}
|
| +.scaleZ {
|
| + scale: 1.0 1.0 0.5;
|
| +}
|
| +</style>
|
| +
|
| +<div class="container">
|
| + <div class="cube scaleY">
|
| + <div class="face front">1</div>
|
| + <div class="face back">2</div>
|
| + <div class="face right">3</div>
|
| + <div class="face left">4</div>
|
| + <div class="face top">5</div>
|
| + <div class="face bottom">6</div>
|
| + </div>
|
| + <div class="cube scaleX scaleZ">
|
| + <div class="face front">1</div>
|
| + <div class="face back">2</div>
|
| + <div class="face right">3</div>
|
| + <div class="face left">4</div>
|
| + <div class="face top">5</div>
|
| + <div class="face bottom">6</div>
|
| + </div>
|
| +</div>
|
|
|
Chromium Code Reviews
Issue 1158603003:
CSS Independent Transform Properties (Closed)
Base URL: https://chromium.googlesource.com/chromium/blink.git@master