今天在学这个3D属性的时候,想做一个旋转木马的效果的,给容器加transform-style: preserve-3d;属性之后,图片就模糊了,没加之前是很清晰的(因为没有加z-index,所以没加的时候,后面的图片会顶在前面),我没有缩放,所以图片太小这种问题不存在,而且我现在是只差这一个属性就导致了图片模糊,百度也没有找到解决的办法,只能在贴吧求大神解决,谢谢大神们
以下是我的代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<meta name="renderer" content="webkit" />
<script type="text/javascript" src="jquery.js"></script>
<title>Document</title>
<style type="text/css">
*{ 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);
}
</style>
<script type="text/javascript">
$(function(){
});
</script>
</head>
<body>
<div class="box">
<div class="div1">
<img src="img/cs01.jpg" alt="" width="180" />
<img src="img/cs02.jpg" alt="" width="180" />
<img src="img/cs03.jpg" alt="" width="180" />
<img src="img/cs04.jpg" alt="" width="180" />
<img src="img/cs05.jpg" alt="" width="180" />
<img src="img/cs06.jpg" alt="" width="180" />
</div>
</div>
</body>
</html>
以下是我的代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<meta name="renderer" content="webkit" />
<script type="text/javascript" src="jquery.js"></script>
<title>Document</title>
<style type="text/css">
*{ 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);
}
</style>
<script type="text/javascript">
$(function(){
});
</script>
</head>
<body>
<div class="box">
<div class="div1">
<img src="img/cs01.jpg" alt="" width="180" />
<img src="img/cs02.jpg" alt="" width="180" />
<img src="img/cs03.jpg" alt="" width="180" />
<img src="img/cs04.jpg" alt="" width="180" />
<img src="img/cs05.jpg" alt="" width="180" />
<img src="img/cs06.jpg" alt="" width="180" />
</div>
</div>
</body>
</html>