Content - b7e1f905bb8a680fba133bcd0224e44ea799e9c1 - 8bff186/css/css-transforms/transofrmed-preserve-3d-1.html

visit type:

Tip revision: 7578e333cabf4c2ddeaed1a9fc57cbc18502bc02 authored by Jonathon Kereliuk on 21 March 2018, 14:01:39 UTC
fix trailing whitespace

Tip revision: 7578e33

transofrmed-preserve-3d-1.html

<!DOCTYPE html>
<html>
<head>
  <title>CSS Transforms API Test: transform preserve-3d</title>
  <link rel="author" title="loveky" href="mailto:ylzcylx@gmail.com">
  <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-property">
  <link rel="match" href="reference/transofrmed-preserve-3d-1-ref.html">
  <meta name="assert" content="The transformed div should establishe a 3D rendering context">
  <style>
  div {
    height: 150px;
    width: 150px;
  }
  .container {
    background-color: red;
  }
  .transformed {
    height: 300px;
    position: relative;
    top: -150px;
    transform-origin: bottom left;
    transform-style: preserve-3d;
    transform: rotateX(60deg);
    background-color: green;
  }
  .child {
    transform-origin: top left;
    transform: rotateX(30deg);
    background-color: red;
  }
  </style>
</head>

<body>
  <p>You should only see a GREEN box if this test passes!</p>
  <div class="container">
    <div class="transformed">
      <div class='child'>
      </div>
    </div>
  </div>
</body>
</html>

Browse the archive

https://github.com/web-platform-tests/wpt