- CSS Tutorial
- CSS - Home
- CSS - Introduction
- CSS - Syntax
- CSS - Inclusion
- CSS - Measurement Units
- CSS - Colors
- CSS - Backgrounds
- CSS - Fonts
- CSS - Text
- CSS - Images
- CSS - Links
- CSS - Tables
- CSS - Borders
- CSS - Margins
- CSS - Lists
- CSS - Padding
- CSS - Cursors
- CSS - Outlines
- CSS - Dimension
- CSS - Scrollbars
- CSS Advanced
- CSS - Visibility
- CSS - Positioning
- CSS - Layers
- CSS - Pseudo Classes
- CSS - Pseudo Elements
- CSS - @ Rules
- CSS - Text Effects
- CSS - Media Types
- CSS - Paged Media
- CSS - Aural Media
- CSS - Printing
- CSS - Layouts
- CSS - Validations
- CSS3 Tutorial
- CSS3 - Tutorial
- CSS3 - Rounded Corner
- CSS3 - Border Images
- CSS3 - Multi Background
- CSS3 - Color
- CSS3 - Gradients
- CSS3 - Shadow
- CSS3 - Text
- CSS3 - Web font
- CSS3 - 2d transform
- CSS3 - 3d transform
- CSS3 - Animation
- CSS3 - Multi columns
- CSS3 - User Interface
- CSS3 - Box Sizing
- CSS Responsive
- CSS - Responsive Web Design
- CSS References
- CSS - Questions and Answers
- CSS - Quick Guide
- CSS - References
- CSS - Color References
- CSS - Web browser References
- CSS - Web safe fonts
- CSS - Units
- CSS - Animation
- CSS Resources
- CSS - Useful Resources
- CSS - Discussion
Determine whether an element should be visible when not facing the screen with CSS
To determine whether an element should be visible when not facing the screen, use the backface-visibility property:
Example
<!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>
- Related Articles
- Set whether or not an element should be visible while not facing the screen with JavaScript?
- How to set whether an element should be visible in JavaScript?
- Set whether the text of the element can be selected or not with CSS
- Specify whether the flex items should wrap or not with CSS
- How to specify whether the content of an element should be translated or not in HTML?
- Set whether an animation should be played forwards or using CSS
- How to specify the number of columns an element should be divided into with CSS
- Verifying whether an element present or visible in Selenium Webdriver
- Set whether the text should be overridden to support multiple languages with CSS
- How to set whether the text of an element can be selected or not with JavaScript?
- Set how many columns an element should span across with CSS
- Set whether the table border should be collapsed into a single border or not with JavaScript?
- How to check if an element is visible with WebDriver?
- How to specify that an element should be pre-selected when the page loads in HTML?
- Set whether the flexible items should wrap or not with JavaScript?
Advertisements