LayoutTests/transforms/transform-properties-mixed.html - Issue 1158603003: CSS Independent Transform Properties

Side by Side Diff

Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.

Keyboard Shortcuts

	File
u :	up to issue
j / k :	jump to file after / before current file
J / K :	jump to next file with a comment after / before current file
	Side-by-side diff
i :	toggle intra-line diffs
e :	expand all comments
c :	collapse all comments
s :	toggle showing all comments
n / p :	next / previous diff chunk or comment
N / P :	next / previous comment
<Up> / <Down> :	next / previous line

	Issue
u :	up to list of issues
j / k :	jump to patch after / before current patch
o / <Enter> :	open current patch in side-by-side view
i :	open current patch in unified diff view

	Issue List
j / k :	jump to issue after / before current issue
o / <Enter> :	open current issue

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

Issue 1158603003: CSS Independent Transform Properties (Closed) Base URL: https://chromium.googlesource.com/chromium/blink.git@master

Patch Set: Rebase master and explicit applyTransform parameters Created 5 years, 6 months 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

« no previous file with comments | « LayoutTests/transforms/scale-parsing.html ('k') | LayoutTests/transforms/transform-properties-mixed-expected.html » ('j') | LayoutTests/transforms/transform-properties-mixed-expected.html » ('J')
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')

OLD	NEW
(Empty)
	1 <!DOCTYPE html>

	2 <style>

	3 .container {

	4 width: 200px;

	5 height: 200px;

	6 margin: 75px 0 0 75px;

	7 border: none;

	8 }

	9 .cube {

	10 width: 100%;

	11 height: 100%;

	12 backface-visibility: visible;

	13 perspective-origin: 150% 150%;

	14 transform-style: preserve-3d;

	15 perspective: 500px;

	16 }

	17 .face {

	18 display: block;

	19 position: absolute;

	20 width: 100px;

	21 height: 100px;

	22 border: none;

	23 line-height: 100px;

	24 font-family: sans-serif;

	25 font-size: 60px;

	26 color: white;

	27 text-align: center;

	28 }

	29 .front {

	30 background: rgba(0, 0, 0, 0.3);

	31 translate: 0 0 50px;

	32 }

	33 .back {

	34 background: rgba(0, 255, 0, 1);

	35 color: black;

	36 translate: 0 0 -50px;

	37 rotate: 180deg 0 1 0;

	38 }

	39 .right {

	40 background: rgba(196, 0, 0, 0.7);

	41 translate: 50px 0 0;

	42 rotate: 90deg 0 1 0;

	43 }

	44 .left {

	45 background: rgba(0, 0, 196, 0.7);

	46 translate: -50px 0 0;

	47 rotate: -90deg 0 1 0;

	48 }

	49 .top {

	50 background: rgba(196, 196, 0, 0.7);

	51 translate: 0 -50px 0;

	52 rotate: 90deg 1 0 0;

	53 }

	54 .bottom {

	55 background: rgba(196, 0, 196, 0.7);

	56 translate: 0 50px 0;

	57 rotate: -90deg 1 0 0;

	58 }

	59 .scaleX {

	60 scale: 0.5 1.0 1.0;

	61 }

	62 .scaleY {

	63 scale: 1.0 0.5 1.0;

	64 }

	65 .scaleZ {

	66 scale: 1.0 1.0 0.5;

	67 }

	68 </style>

	69

	70 <div class="container">

	71 <div class="cube scaleY">

	72 <div class="face front">1</div>

	73 <div class="face back">2</div>

	74 <div class="face right">3</div>

	75 <div class="face left">4</div>

	76 <div class="face top">5</div>

	77 <div class="face bottom">6</div>

	78 </div>

	79 <div class="cube scaleX scaleZ">

	80 <div class="face front">1</div>

	81 <div class="face back">2</div>

	82 <div class="face right">3</div>

	83 <div class="face left">4</div>

	84 <div class="face top">5</div>

	85 <div class="face bottom">6</div>

	86 </div>

	87 </div>

OLD	NEW