<<web>>3d translate3d

最新推荐文章于 2022-06-27 09:12:57 发布

prototypeAlert

最新推荐文章于 2022-06-27 09:12:57 发布

阅读量459

点赞数

分类专栏： <2016> web

本文链接：https://blog.csdn.net/qq_15766257/article/details/51400717

版权

<2016> 同时被 2 个专栏收录

43 篇文章 0 订阅

订阅专栏

web

15 篇文章 0 订阅

订阅专栏

这里写图片描述
不多说，上代码
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);
}