Để chỉ định phối cảnh về cách các phần tử 3D được xem, hãy sử dụng thuộc tính phối cảnh CSS.
Bạn có thể thử chạy mã sau để làm việc với thuộc tính 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;
}
.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>