<!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>
*{padding: 0;margin: 0;}
ul{list-style: none;width: 500px;height: 500px;border: 1px solid black;margin: 200px auto;position: relative
;transform-style: preserve-3d;transition: 10s;transform-origin: center center -150px;}
li{width: 300px;height: 300px;margin: 100px;position: absolute;}
li:nth-child(1){background: url(./150的图片素材/1.png);}
li:nth-child(2){background: url(./150的图片素材/2.png);left: -300px;transform-origin: right;transform: rotateY(-60deg);}
li:nth-child(3){background: url(./150的图片素材/3.png);left: 300px;transform-origin: left;transform: rotateY(60deg);}
li:nth-child(4){background: url(./150的图片素材/4.png);left: -300px;transform-origin: right;transform: translateZ(-531px)rotateY(60deg);}
li:nth-child(5){background: url(./150的图片素材/5.png);left: 300px;transform-origin: left; transform: translateZ(-531px)rotateY(-60deg) ;}
li:nth-child(6){background: url(./150的图片素材/6.png);transform: translateZ(-531px);}
ul:hover {transform: rotateY(360deg);}
</style>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>为什么我给ul加了perspective后显示的很奇怪（最后面的图片很小），反而不加它旋转起来更有立体感？
不知道你这个问题是否已经解决, 如果还没有解决的话: