1

3 つの画像を 3D 表示に配置する素敵な小さな CSS スタイルを作成し、左右の画像を遠近法で表示してから、中央の画像の後ろに配置しました。Chrome では完全に機能しますが、Safari では順序が逆になります。また、3D スタイルなしで Firefox と IE に正しく配置しました。

ここに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