Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(496)

Side by Side Diff: third_party/WebKit/LayoutTests/transforms/transform-properties-mixed.html

Issue 2531753002: CSS Independent Transform Properties: support rotate: <axes> <angle> (Closed)
Patch Set: tests Created 4 years ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
OLDNEW
1 <!DOCTYPE html> 1 <!DOCTYPE html>
2 <style> 2 <style>
3 .container { 3 .container {
4 width: 200px; 4 width: 200px;
5 height: 200px; 5 height: 200px;
6 margin: 75px 0 0 75px; 6 margin: 75px 0 0 75px;
7 border: none; 7 border: none;
8 } 8 }
9 .cube { 9 .cube {
10 width: 100%; 10 width: 100%;
(...skipping 16 matching lines...) Expand all
27 text-align: center; 27 text-align: center;
28 } 28 }
29 .front { 29 .front {
30 background: rgba(0, 0, 0, 0.3); 30 background: rgba(0, 0, 0, 0.3);
31 translate: 0 0 50px; 31 translate: 0 0 50px;
32 } 32 }
33 .back { 33 .back {
34 background: rgba(0, 255, 0, 1); 34 background: rgba(0, 255, 0, 1);
35 color: black; 35 color: black;
36 translate: 0 0 -50px; 36 translate: 0 0 -50px;
37 rotate: 180deg 0 1 0; 37 rotate: 0 1 0 180deg;
38 } 38 }
39 .right { 39 .right {
40 background: rgba(196, 0, 0, 0.7); 40 background: rgba(196, 0, 0, 0.7);
41 translate: 50px 0 0; 41 translate: 50px 0 0;
42 rotate: 90deg 0 1 0; 42 rotate: 0 1 0 90deg;
43 } 43 }
44 .left { 44 .left {
45 background: rgba(0, 0, 196, 0.7); 45 background: rgba(0, 0, 196, 0.7);
46 translate: -50px 0 0; 46 translate: -50px 0 0;
47 rotate: -90deg 0 1 0; 47 rotate: 0 1 0 -90deg;
48 } 48 }
49 .top { 49 .top {
50 background: rgba(196, 196, 0, 0.7); 50 background: rgba(196, 196, 0, 0.7);
51 translate: 0 -50px 0; 51 translate: 0 -50px 0;
52 rotate: 90deg 1 0 0; 52 rotate: 1 0 0 90deg;
53 } 53 }
54 .bottom { 54 .bottom {
55 background: rgba(196, 0, 196, 0.7); 55 background: rgba(196, 0, 196, 0.7);
56 translate: 0 50px 0; 56 translate: 0 50px 0;
57 rotate: -90deg 1 0 0; 57 rotate: 1 0 0 -90deg;
58 } 58 }
59 .scaleX { 59 .scaleX {
60 scale: 0.5 1.0 1.0; 60 scale: 0.5 1.0 1.0;
61 } 61 }
62 .scaleY { 62 .scaleY {
63 scale: 1.0 0.5 1.0; 63 scale: 1.0 0.5 1.0;
64 } 64 }
65 .scaleZ { 65 .scaleZ {
66 scale: 1.0 1.0 0.5; 66 scale: 1.0 1.0 0.5;
67 } 67 }
(...skipping 10 matching lines...) Expand all
78 </div> 78 </div>
79 <div class="cube scaleX scaleZ"> 79 <div class="cube scaleX scaleZ">
80 <div class="face front">1</div> 80 <div class="face front">1</div>
81 <div class="face back">2</div> 81 <div class="face back">2</div>
82 <div class="face right">3</div> 82 <div class="face right">3</div>
83 <div class="face left">4</div> 83 <div class="face left">4</div>
84 <div class="face top">5</div> 84 <div class="face top">5</div>
85 <div class="face bottom">6</div> 85 <div class="face bottom">6</div>
86 </div> 86 </div>
87 </div> 87 </div>
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698