CSS3背景效果就像在powerpoint中一样

Question

可以在CSS3中实现图片效果吗？是某种powerpoint效应。

可以说，我的背景是蓝色，我需要在点击此框后展开图像（黄色）。当然，这里缺少第四张图像，其中图像完全可见而没有蓝色背景。

我需要在25度（可能是30度）角度扩展它，当然还有反向功能（以这种方式显示背景和隐藏图像）。

重要的是，该框架必须始终保持在那里。

有人可以帮助我吗？

谢谢

我的代码： HTML

<div id="day6c" class="frames6">
    <div id="day6">
        6
    </div>
</div>

SCSS

@mixin frame($design, $frame) {
    background-image: url("../img/design-frames/"#{$design}".png"), url("../img/frames/"#{$frame}".png");
    background-position: center, center;
    background-repeat: no-repeat, no-repeat;
    height: 239px;
    line-height: 239px;
    vertical-align: middle;
    text-align: center;
    font-size: 70px;
    margin-bottom: 20px;
    @include box-shadow(0px 2px 5px #9f9f9f);
}

.frames6 {
    @include frame("6", "frame5");
    position: relative;
    overflow: hidden;

    div {
        background-color: $frames-bg-red;
        color: $frames-font-red;
        position: relative;
        z-index: -1;
    }
}

该bg“黄色”图像的功能尚未实现，但如果我可以这样做并不难。。frames6 #div“hide”

可能我需要说，黄色的“图像”不应该是角度，但只是在那个角度扩展，它看起来应该是正常的

Answer 1

您可以设置body{overflow:hidden;}并创建两个大的blue div，以便最初覆盖yellow图像，并在用户点击按钮时设置动画。

您可以执行以下操作： DEMO

Answer 2

好的，谢谢代码。它看起来很复杂，所以......我不打算解开它。但是我很快就摆弄着嘲笑后面的东西。我认为它可以完成您想要的任务，但您需要将其修改为您正在寻找/拥有的任何行为或代码。邮票轮廓将更加困难，但可以通过在切割形状上放置另一个div绝对值来实现。如果要确保黄色图像不会进入该角度，则可能必须在内部添加另一个 div并以反向角度对其进行倾斜。这有效。有时。它的挑剔。

它是几种CSS3技术的组合，因此它不适用于旧版浏览器。我在Safari中测试过，对于其他浏览器，您可能需要添加更多前缀..

HTML

<div id="anim">
    <div id="next">

    </div>
</div>

CSS

#anim {
    width: 500px;
    height: 500px;
    position: relative;
    overflow: hidden;
    background: blue;
}
#anim #next {
    width: 110%;
    height: 0;
    position: absolute;
    left: 50%;
    top: 50%;
    overflow: hidden;
    background: yellow;
    -webkit-transform: skewY(-9deg) translate(-50%,-50%);
    transition: all 500ms;
}
#anim #next.anim {
    height: 120%;
    top: -10%;
    left: -10%;
    -webkit-transform: skewY(-9deg) translate(0,0);
}

JAVASCRIPT（这是用于测试）

window.onload = function(){
    setTimeout(function(){
        document.getElementById("next").className="anim";
    }, 1000);
}

希望这会有所帮助。祝你好运！