| <!DOCTYPE html> |
| <html> |
| <head> |
| <meta charset="utf-8"> |
| <title>Individual transform: combine individual transform properties</title> |
| <link rel="help" href="https://drafts.csswg.org/css-transforms-2/#individual-transforms"> |
| <link rel="help" href="https://drafts.csswg.org/css-transforms-2/#ctm"> |
| <meta name="assert" content="Tests that we combine animated transformations with the underlying style correctly."/> |
| <link rel="match" href="individual-transform-combine-ref.html"> |
| <style> |
| .block { |
| display: inline-block; |
| width: 50px; |
| height: 50px; |
| margin: 50px; |
| padding: 0; |
| transform-origin: center center; |
| background: lime; |
| /* Freeze the animation at the midpoint. */ |
| animation-timing-function: cubic-bezier(0, 1, 1, 0); |
| animation-duration: 1000000s; |
| animation-delay: -500000s; |
| } |
| |
| @keyframes anim-1 { |
| to { rotate: 180deg; } |
| } |
| #div-1 { |
| scale: 2 1; |
| animation-name: anim-1; |
| } |
| |
| @keyframes anim-2 { |
| from { scale: 1 1; } |
| to { scale: 3 1; } |
| } |
| #div-2 { |
| /* The scale property is replaced in the animation. */ |
| scale: 1 3; |
| rotate: 90deg; |
| animation-name: anim-2; |
| } |
| |
| @keyframes anim-3 { |
| to { rotate: 180deg; } |
| } |
| #div-3 { |
| transform: scale(2, 1); |
| animation-name: anim-3; |
| } |
| |
| @keyframes anim-4 { |
| to { transform: scale(7, 1); } |
| } |
| #div-4 { |
| rotate: 90deg; |
| /* As transform is a separate property from scale, the two scales are |
| chained together. */ |
| scale: 0.5 1; |
| animation-name: anim-4; |
| } |
| |
| /* transform origin tests */ |
| |
| @keyframes anim-5 { |
| to { rotate: 180deg; translate: 100px -50px; } |
| } |
| #div-5 { |
| transform-origin: top left; |
| scale: 2 1; |
| animation-name: anim-5; |
| } |
| |
| @keyframes anim-6 { |
| to { rotate: 180deg; translate: -100px 50px; } |
| } |
| #div-6 { |
| transform-origin: bottom right; |
| scale: 2 1; |
| animation-name: anim-6; |
| } |
| |
| </style> |
| </head> |
| <body> |
| <div> |
| <div id="div-1" class="block"></div> |
| <div id="div-2" class="block"></div> |
| </div> |
| <div> |
| <div id="div-3" class="block"></div> |
| <div id="div-4" class="block"></div> |
| </div> |
| <div> |
| <div id="div-5" class="block"></div> |
| <div id="div-6" class="block"></div> |
| </div> |
| |
| </body> |
| </html> |