Sử dụng thuộc tính gốc phối cảnh để chỉ định vị trí dưới cùng của các phần tử 3D.
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>