Home > Article > Web Front-end > Specifies how nested elements are rendered in 3D space
Specifies how nested elements are rendered in 3D space
- WBOYforward
- 2023-09-02 12:57:02700browse
To specify how nested elements are rendered in 3D space, use the transform-style property in CSS.
You can try running the following code to implement the transform-style attribute:
Example
Live Demonstration
<!DOCTYPE html>
<html>
<head>
<style>
.demo1 {
width: 300px;
height: 300px;
background-color: yellow;
}
.demo2 {
width: 200px;
height: 200px;
background-color: orange;
}
.demo3 {
width: 100px;
height: 100px;
background-color: blue;
transform: rotate(10deg);
transform-origin: 30% 40%;
transform-style: preserve-3d;
}
</style>
</head>
<body>
<h1>Rotation</h1>
<div class = "demo1">Demo
<div class = "demo2">Demo
<div class = "demo3">
Demo
</div>
</div>
</div>
</body>
</html>The above is the detailed content of Specifies how nested elements are rendered in 3D space. 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