<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{margin: 0;padding: 0;}
.box{border: 1px solid black;width: 300px;height: 300px;
perspective: 500px;
}
.list{margin: 300px auto;}
.list div{width: 200px;height: 50px;margin-top: 10px;background: red;
transform-origin: top;
/* transform: rotateX(180deg); */
text-align: center;
line-height: 50px;
color: white;
transform: rotateY(-40deg);
}
.lisy > div{position: relative;top: 50px;}
</style>
</head>
<body>
<button>展开</button>
<div class="box">
<div class="list">
<div>第一项
<div>第二项
<div>第三项
<div>第四项
<div>第五项
<div>第六项</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>我把transform: rotateY(-40deg);放在.list div下面和放在.list下面为什么整体视觉效果差别很大？
为什么感觉越在最下面的感觉旋转的越多？按理来说每个div旋转的都应该一样的啊
主要原因是因为，你的第一级父元素圆转后，子节点是会跟随着父节点旋转的，这时你在二级元素旋转时，又个添加了一个transform: rotateY(-40deg)，那它就会在父元素旋转的基础上再加40deg，所以，你只需要给父节点加 rotateY(-40deg)，其它节点不用动