<>3d translate3d

不 多说 ,上代码
1,html

<!doctype html>
 <html>
  <head>
   <meta charset="utf-8">
   <link href="D:/test/css/css.css" rel="stylesheet" type="text/css">
   <title></title>
  </head>
 <body>
  <div class="stage s1">
    <div class="container">
        <img src="d:/test/images/1.jpg" alt="" width="300px" height="300px" />
        <img src="d:/test/images/2.jpg" alt="" width="300px" height="300px" />
    </div>
</div>
<div class="stage s2">
    <div class="container">
        <img src="d:/test/images/3.jpg" alt="" width="300px" height="300px" />
        <img src="d:/test/images/4.jpg" alt="" width="300px" height="300px" />
    </div>
</div> 
 </body>
</html>

2,css

.stage { width: 1000px; height: 1000px; float: left; margin: 15px; position: relative; background: url(http://www.w3cplus.com/sites/default/files/blogs/2013/1311/bg.jpg) repeat center center; -webkit-perspective: 1200px; -moz-perspective: 1200px; -ms-perspective: 1200px; -o-perspective: 1200px; perspective: 1200px; }
.container { position: absolute; top: 50%; left: 50%; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; -o-transform-style: preserve-3d; transform-style: preserve-3d; }
.container img { position: absolute; margin-left: -35px; margin-top:-50px; }
.container img:nth-child(1){ z-index: 1; opacity: .6; }
.s1 img:nth-child(2){ z-index: 2; -webkit-transform: translate3d(30px,30px,200px); -moz-transform: translate3d(30px,30px,200px); -ms-transform: translate3d(30px,30px,200px); -o-transform: translate3d(30px,30px,200px); transform: translate3d(30px,30px,200px); }
.s2 img:nth-child(2){ z-index: -2; -webkit-transform: translate3d(30px,30px,-200px); -moz-transform: translate3d(30px,30px,-200px); -ms-transform: translate3d(30px,30px,-200px); -o-transform: translate3d(30px,30px,-200px); transform: translate3d(30px,30px,-200px); }

当z轴值越大时,元素也离观看者更近,从视觉上元素就变得更大;反之其值越小时,元素也离观看者更远,从视觉上元素就变得更小。

你可能感兴趣的:(<>3d translate3d)