1

我创建了一个漂亮的小 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;
}

有任何想法吗？

4

0 回答 0