移位响应的倾斜图像 [英] Displacing responsive slant images

查看：94
本文介绍了移位响应的倾斜图像的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我想创建类似这样的东西：





我设法创建了这个：





但我似乎无法获得第一张和最后一张图片。



bootply



这是我的代码：
HTML：

 < div class =container> 
< div class =col-md-12> 
< div> 
< div class =row> 
< div class =col-xs-3>< a href =＃x>< img src =http://plugins.themescode.com/wp-content/uploads /2015/11/item4.pngalt =Imageclass =img-responsive>< / a>< / div> 
< div class =col-xs-3>< a href =＃x>< img src =http://plugins.themescode.com/wp-content/uploads /2015/11/item3.pngalt =Imageclass =img-responsive>< / a>< / div> 
< div class =col-xs-3>< a href =＃x>< img src =http://plugins.themescode.com/wp-content/uploads /2015/11/item2.pngalt =Imageclass =img-responsive>< / a>< / div> 
< div class =col-xs-3>< a href =＃x>< img src =http://plugins.themescode.com/wp-content/uploads /2015/11/item1.pngalt =Imageclass =img-responsive>< / a>< / div> 
< / div> 
< / div> 
< / div>



CSS：

  .col-xs-3 {
 transform：translate3d（0，0，0）skew（-20deg，0deg）; 
 -webkit-transform：translate3d（0，0，0）skew（-20deg，0deg）; 
 padding-left：5px; 
 padding-right：5px; 
}

图片应占据页面的100％



非常感谢



Avi

$ b $感谢所有



这是我解决的方法：



bootply



HTML：

 < div class =container> 
< div class =col-md-12 overfh> 
< div> 
< div class =row contec-row> 
 
< div class =col-xs-3 contec-col>  class =img-responsive>< / a> 
< div class =contec-bg> 
< div class =contec-content> 
< div class =contec-txt> vdsvsd vddsv vsdv< / div> 
< / div> 
< / div> 
< / div> 
 
< div class =col-xs-3 contec-col>  class =img-responsive>< / a> 
< div class =contec-bg> 
< div class =contec-content> 
< div class =contec-txt> vdsvsd vddsv vsdv< / div> 
< / div> 
< / div> 
< / div> 
 
< div class =col-xs-3 contec-col>  class =img-responsive>< / a> 
< div class =contec-bg> 
< div class =contec-content> 
< div class =contec-txt> vdsvsd vddsv vsdv< / div> 
< / div> 
< / div> 
< / div> 
 
< div class =col-xs-3 contec-col>  class =img-responsive>< / a> 
< div class =contec-bg> 
< div class =contec-content> 
< div class =contec-txt> vdsvsd vddsv vsdv< / div> 
< / div> 
< / div> 
< / div> 
 
< / div> 
< / div> 
< / div>



CSS：

  .contec-row {
 margin-left：-73px; 
 margin-right：-73px; 
} 
 
 .overfh {
 overflow：hidden; 
} 
 
 .contec-col {
 transform：translate3d（0，0，0）skew（-20deg，0deg）; 
 -webkit-transform：translate3d（0，0，0）skew（-20deg，0deg）; $ b $ p padding-left：5px; 
 padding-right：5px; 
} 
 
 .contec-bg {
 width：calc（100％ -  23px）; 
 height：30％; 
 position：absolute; 
 bottom：0; 
} 
 .contec-content {
 padding-top：5％; 
 width：100％; 
 height：100％; 
 text-align：center; 
 vertical-align：middle; 
 background：rgba（0,0,0，.75）; 
 color：white; 
 opacity：0; 
 transition：opacity .8s ease-in-out; 
} 
 
 .contec-txt {
 transform：translate3d（0，0，0）skew（20deg，0deg）; 
 -webkit-transform：translate3d（0，0，0）skew（20deg，0deg）; 
} 
 
 @media（max-width：1200px）{
 .contec-bg {
 width：calc（100％ -  10px）; 
} 
}

JS：

  $（document）.ready（function（）{
 $（contec-col）。mouseover（function（）{
 $（this）.find（'。contec-content'）。css（opacity，1）; 
}）; 
 
 $ .mouseleave（function（）{
 $（this）.find（'。contec-content'）。css（opacity，0）; 
}）; 
} ;


I'm trying to create something like this:

I managed to create this:

But i can't seem to get the first and last image to be straight

Live example on bootply

This is my code: HTML:

<div class="container">
<div class="col-md-12">
    <div>
        <div class="row">
            <div class="col-xs-3"><a href="#x"><img src="http://plugins.themescode.com/wp-content/uploads/2015/11/item4.png" alt="Image" class="img-responsive"></a></div>
            <div class="col-xs-3"><a href="#x"><img src="http://plugins.themescode.com/wp-content/uploads/2015/11/item3.png" alt="Image" class="img-responsive"></a></div>
            <div class="col-xs-3"><a href="#x"><img src="http://plugins.themescode.com/wp-content/uploads/2015/11/item2.png" alt="Image" class="img-responsive"></a></div>
            <div class="col-xs-3"><a href="#x"><img src="http://plugins.themescode.com/wp-content/uploads/2015/11/item1.png" alt="Image" class="img-responsive"></a></div>
        </div>
    </div>
</div>

CSS:

.col-xs-3{ 
      transform: translate3d(0, 0, 0) skew(-20deg, 0deg);
      -webkit-transform: translate3d(0, 0, 0) skew(-20deg, 0deg);
      padding-left: 5px;
      padding-right: 5px;
}

The images should take a 100% of the page width

Thanks a lot

Avi

解决方案

Thank all

That is how i solved it:

bootply

HTML:

<div class="container">
<div class="col-md-12 overfh">
    <div>
        <div class="row contec-row">

            <div class="col-xs-3 contec-col">
                <a href="#x"><img src="http://plugins.themescode.com/wp-content/uploads/2015/11/item1.png" alt="Image" class="img-responsive"></a>
                <div class="contec-bg"> 
                    <div class="contec-content">
                      <div class="contec-txt"> vdsvsd vddsv vsdv</div>
                    </div>
                </div>
            </div>

            <div class="col-xs-3 contec-col">
                <a href="#x"><img src="http://plugins.themescode.com/wp-content/uploads/2015/11/item2.png" alt="Image" class="img-responsive"></a>
                <div class="contec-bg"> 
                    <div class="contec-content">
                      <div class="contec-txt"> vdsvsd vddsv vsdv</div>
                    </div>
                </div>
            </div>

            <div class="col-xs-3 contec-col">
                <a href="#x"><img src="http://plugins.themescode.com/wp-content/uploads/2015/11/item3.png" alt="Image" class="img-responsive"></a>
                <div class="contec-bg"> 
                    <div class="contec-content">
                      <div class="contec-txt"> vdsvsd vddsv vsdv</div>
                    </div>
                </div>
            </div>

            <div class="col-xs-3 contec-col">
                <a href="#x"><img src="http://plugins.themescode.com/wp-content/uploads/2015/11/item4.png" alt="Image" class="img-responsive"></a>
                <div class="contec-bg"> 
                    <div class="contec-content">
                      <div class="contec-txt"> vdsvsd vddsv vsdv</div>
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>

CSS:

    .contec-row{
        margin-left: -73px;
        margin-right: -73px;
    }

    .overfh {
        overflow: hidden;
    }

    .contec-col{ 
        transform: translate3d(0, 0, 0) skew(-20deg, 0deg);
        -webkit-transform: translate3d(0, 0, 0) skew(-20deg, 0deg);
        padding-left: 5px;
        padding-right: 5px;
    }

    .contec-bg {
        width:calc(100% - 23px);
        height:30%;
        position: absolute;
        bottom: 0;
    }
    .contec-content {
        padding-top:5%;
        width:100%;
        height:100%;
        text-align: center;
        vertical-align: middle;
        background:rgba(0,0,0,.75);
        color:white;
        opacity:0;
        transition: opacity .8s ease-in-out;
    }

    .contec-txt{
        transform: translate3d(0, 0, 0) skew(20deg, 0deg);
        -webkit-transform: translate3d(0, 0, 0) skew(20deg, 0deg);
    }

    @media (max-width: 1200px) {
        .contec-bg {
            width:calc(100% - 10px);
        }
    }

JS:

    $(document).ready(function(){
     $(".contec-col").mouseover(function(){
      $(this).find('.contec-content').css("opacity", "1");
     });

   $(".contec-col").mouseleave(function(){
       $(this).find('.contec-content').css("opacity", "0");
     });
});

这篇关于移位响应的倾斜图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆