| <!DOCTYPE html> |
| <style> |
| svg { |
| background-color: red; |
| } |
| rect { |
| transform-box: fill-box; |
| } |
| #target1 { |
| transform: rotate(90deg); |
| } |
| #target2 { |
| transform: translate(50%, -50%); |
| } |
| #target3 { |
| transform-origin: 25% 25%; |
| transform: rotate(180deg) translate(-25%, -25%); |
| } |
| #target4 { |
| transform-origin: 75px 75px; |
| transform: rotate(-180deg) translate(-25%, -25%); |
| } |
| </style> |
| <svg width="200" height="200"> |
| <rect id="target1" x="100" y="100" width="100" height="100" fill="green"/> |
| <rect id="target2" x="50" y="50" width="100" height="100" fill="green"/> |
| <rect id="target3" x="25" y="25" width="100" height="100" fill="green"/> |
| <rect id="target4" x="25" y="25" width="100" height="100" fill="green"/> |
| </svg> |
