在父级加perspective
效果是每个子div都不同,相当于站在一个视角看多个div
<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style>
body {perspective:1000px;
}
.box {
float: left;width: 200px;
height: 200px;
margin: 50px 20px 0 0;
transform:rotateY(45deg);
background-color: red;
}</style>
</head>
<body><div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</body>
</html>
在元素本身加perspective
每个子div效果都一样,每个视角都独立
<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style>
body {}
.box {
float: left;width: 200px;
height: 200px;
margin: 50px 20px 0 0;
transform:perspective(1000px) rotateY(45deg);
background-color: red;
}</style>
</head>
<body><div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</body>
</html>
