Để chỉ định vị trí dưới cùng của các phần tử 3D, hãy sử dụng thuộc tính gốc phối cảnh.
Bạn có thể thử chạy mã sau để triển khai thuộc tính gốc phối cảnh:
Ví dụ
<!DOCTYPE html>
<html>
<head>
<style>
.demo1 {
position: relative;
width: 150px;
height: 150px;
background-color: yellow;
perspective: 80px;
margin: 50px;
perspective-origin: left;
}
.demo2 {
position: absolute;
padding: 20px;
background-color: orange;
transform-style: preserve-3d;
transform: rotateX(45deg);
}
</style>
</head>
<body>
<h1>Rotation</h1>
<div class="demo1">Demo
<div class="demo2">Demo
</div>
</div>
</body>
</html>