<!DOCTYPE HTML> <title>Testcase for outline around 3-D transform</title> <style> html, body { margin: 0; padding: 0; border: none } div { width: 100px; height: 100px; } body > div { margin-top: 200px; margin-left: 200px; transform-style: flat; } body > div > div { transform: rotateX(30deg); transform-origin: 50% 50%; transform-style: preserve-3d; outline: 5px solid green; } body > div > div > div { transform: rotateX(30deg); width: 50px; margin-left: 25px; transform-origin: 50% 50%; transform-style: preserve-3d; outline: 5px solid blue; } </style> <div><div><div></div></div></div>