preserve3d css3,关于transform-style: preserve-3d;的问题

该楼层疑似违规已被系统折叠 隐藏此楼查看此楼

今天在学这个3D属性的时候，想做一个旋转木马的效果的，给容器加transform-style: preserve-3d;属性之后，图片就模糊了，没加之前是很清晰的(因为没有加z-index，所以没加的时候，后面的图片会顶在前面)，我没有缩放，所以图片太小这种问题不存在，而且我现在是只差这一个属性就导致了图片模糊，百度也没有找到解决的办法，只能在贴吧求大神解决，谢谢大神们

以下是我的代码

Document

*{ margin:0; padding:0;}

body{ padding:10px;}

ul,ol,li{ list-style: none;}

.box{

margin: 100px;

border: 1px solid #000;

width: 600px;

height: 600px;

perspective: 400px;

perspective-origin:50% 50%;

}

.box div{

width: 200px;

height: 200px;

text-align: center;

margin: 200px auto;

}

.div1{

position:relative;

z-index: 1;

transform-style: preserve-3d;

}

.div1 img{

position:absolute;

left:0;

top:0;

}

.div1 img:nth-child(1){

transform:rotateY(0deg) translateZ(170px);

}

.div1 img:nth-child(2){

transform:rotateY(60deg) translateZ(170px);

}

.div1 img:nth-child(3){

transform:rotateY(120deg) translateZ(170px);

}

.div1 img:nth-child(4){

transform:rotateY(180deg) translateZ(170px);

}

.div1 img:nth-child(5){

transform:rotateY(240deg) translateZ(170px);

}

.div1 img:nth-child(6){

transform:rotateY(300deg) translateZ(170px);

}

$(function(){

});