Question

我创建了一个漂亮的小CSS样式，将三个图像放入3D显示，左右图像放入透视，然后放在中央图像后面。它在Chrome中完美运行，但在Safari中，订单可以逆转。我也正确地将它们放在Firefox和IE中，没有3D风格。

这是HTML

<!DOCTYPE html>
<html>
<head>
<title>triple screen css</title>
<link href="screen.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="triple-panel">
  <div class="left-img shrink">
    <img src="images/img2.png"/>
  </div>
  <div class="center-img">
    <img src="images/img1.png"/>
  </div>
  <div class="right-img shrink">
    <img src="images/img3.png"/>
  </div>
</div>

和CSS

.triple-panel > div {
display:inline;
float:left;
perspective: 500;
-webkit-perspective: 500;
-webkit-transform-style: preserve-3d;
-webkit-transition-property: perspective;
}

.triple-panel img {
display:inline;
margin: 2em auto;
border:10px solid #fcfafa;
/* ADDS DROP SHADOW */
-moz-box-shadow:0 3px 10px #888;
-webkit-box-shadow:0 3px 10px #888;
box-shadow:0 3px 10px #888;
}

.shrink {
 transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-webkit-transform:scale(.75,.75);
-ms-transform:scale(.75,.75); /* IE 9 */
-moz-transform:scale(.75,.75); /* Firefox */
-webkit-transform:scale(.75,.75); /* Safari and Chrome */
-o-transform:scale(.75,.75); /* Opera */
}

.left-img img {
position:relative;
-webkit-transform: rotateY(-30deg);
left:50px;
 }

.center-img img{
position:relative;
top:0;
}

.right-img img {
position:relative;
-webkit-transform: rotateY(30deg);
left:-50px;
}

.left-img, .right-img {
position:relative;
z-index:1;
}

.center-img {
position:relative;
z-index:30;
}

有什么想法吗？

z-index在safari中显示不正确

0 个答案: