Source Code:
(back to article)
Submit
Result:
Report an issue
<!DOCTYPE html> <html> <head> <title>Title of the document</title> <style> .element { position: relative; height: 250px; margin: 50px; padding: 10px; border: 2px solid #cccccc; background-color: #eeeeee; } .element1 { margin: 20px; border: 1px dotted; height: 150px; width: 150px; background-color: green; transform: rotateX(15deg); transform-style: flat; } .element2 { margin: 20px; border: 1px dotted; height: 200px; width: 200px; background-color: lightgreen; transform: rotateX(45deg); } </style> </head> <body> <h2>Transform-style property example</h2> <div class="element"> <div class="element1"> Green <div class="element2">Blue</div> </div> </div> </body> </html>