Để chỉ định cách các phần tử lồng nhau được hiển thị trong không gian 3D, hãy sử dụng kiểu chuyển đổi thuộc tính trong CSS.
Bạn có thể thử chạy mã sau để triển khai thuộc tính kiểu biến đổi:
Ví dụ
<!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>