Home > AI > Language > CSS >

perspective: 1000px;

The distance between Z plane and the user. The smaller this value, the more impressive the effect.

Example:

<!DOCTYPE html>
<html>
  <head>
    <title>Parcel Sandbox</title>
    <meta charset="UTF-8" />
  </head>

  <body>
    <div class="parent">
      <div class="child">
        HelloWorld
      </div>
    </div>

    <style>
      .parent {
        perspective: 1000px;
        background: red;
      }

      .child {
        transform: rotateY(60deg);
        background: blue;
      }
    </style>
  </body>
</html>

Leave a Reply