#a { width:800px; height:400px; margin:0 auto; /*perpective*/ -webkit-perspective:1200px; } #b { width:800px; height:400px; transform:rotatex(-20deg) rotatey(0deg); /*border:1px solid red; */ position:relative; /*规定 子元素 按照3d位置摆放*/ -webkit-transform-style:preserve-3d; animation:xz 10s linear infinite; /* float:left; */ } #b div { width:100px; height:100px; background:#e4393c; /*绝对定位*/ position:absolute; top:150px; left:350px; } #b div:nth-child(1) { transform:rotatey(0deg) translatez(200px); } #b div:nth-child(2) { transform:rotatey(60deg) translatez(200px); } #b div:nth-child(3) { transform:rotatey(120deg) translatez(200px); } #b div:nth-child(4) { transform:rotatey(180deg) translatez(200px); } #b div:nth-child(5) { transform:rotatey(240deg) translatez(200px); } #b div:nth-child(6) { transform:rotatey(300deg) translatez(200px); } @keyframes xz { 100% { transform:rotatex(-20deg) rotatey(360deg); } }img { width:100px; height:100px; } #c { width:390px; height:390px; background:#ddd url('timg (2).jpg') no-repeat; background-size:390px 390px; border-radius:50%; position:absolute; top:-145px; left:204px; transform:rotatex(-64deg) translatez(237px); }