Home > Article > Web Front-end > Use CSS to determine whether an element is visible when not facing the screen

Use CSS to determine whether an element is visible when not facing the screen

PHPzforward: 2023-08-30 12:49:101318browse

用 CSS 确定元素在不面向屏幕时是否可见

To determine whether an element is visible when not facing the screen, use the backface-visibility attribute:

Example

Live Demonstration

<!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>Rotation</h1>
      <div class = "demo1">Demo
         <div class = "demo2">Demo</div>
      </div>
   </body>
</html>

The above is the detailed content of Use CSS to determine whether an element is visible when not facing the screen. For more information, please follow other related articles on the PHP Chinese website!

Statement：

This article is reproduced at:tutorialspoint.com. If there is any infringement, please contact admin@php.cn delete

Previous article：Use CSS to set different font families for screen and printNext article：Use CSS to set different font families for screen and print

See more

Use CSS to determine whether an element is visible when not facing the screen

Example

Related articles