Xác định phần tử có hiển thị khi không đối diện màn hình với CSS

Để xác định xem một phần tử có nên hiển thị khi không đối diện màn hình hay không, hãy sử dụng thuộc tính backface-visibility:

Ví dụ

<!DOCTYPE html>
<html>
  <head>
    <style>
      .demo1 {
        position: relative;
        width: 150px;
        height: 150px;
        background-color: yellow;
        perspective: 80px;
        margin: 50px;
        perspective-origin: left;
        transform: rotateY(180deg);
      }
      .demo2 {
        position: absolute;
        padding: 20px;
        background-color: orange;
        transform-style: preserve-3d;
        transform: rotateX(45deg);
        backface-visibility: visible;
      }
    </style>
  </head>
  <body>
    <h1>Xoay 3D</h1>
    <div class="demo1">Demo
      <div class="demo2">Demo</div>
    </div>
  </body>
</html>