Sử dụng thuộc tính kiểu chuyển đổi để đặt cách các phần tử lồng nhau được hiển thị trong không gian 3D.
Bạn có thể thử chạy mã sau để triển khai kiểu chuyển đổi tài sản
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>