bootsrap 实现图片翻转-阿里云开发者社区

开发者社区> 开发与运维> 正文

bootsrap 实现图片翻转

简介: 写代码抗病毒

听说病毒传播已经出现拐点了,希望早日解禁。昨天写的拼图没有调通。今天写了个简单的。
image
image
直接上代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>图片翻转</title>
    <link rel="stylesheet" href="./images0130/bootstrap/css/bootstrap.min.css">
    <style>
        .wrapper {
            padding: 30px;
        }

        .wrapper .box {
            position: relative;
            perspective: 1000px;
        }

        .wrapper .box img {
            width: 100%;
        }

        .wrapper .box .box-img {
            transform: rotateY(0deg);
            transition: all 0.5s ease-in;
        }

        .wrapper .box:hover .box-img {
            transform: rotateY(-90deg);
        }

        .wrapper .box:hover .box-con {
            transform: rotateY(0deg);
        }

        .wrapper .box .box-con {
            position: absolute;
            top: 0;
            width: 100%;
            height: 100%;
            background-color:rgba(0,0,0,0.7);
            transform: rotateY(90deg);
            transition: all 0.5s ease-in;
            color: #fff;
            text-align: center;
            padding: 15px;

        }

    </style>
</head>

<body>
    <div class="wrapper">
        <div class="container">
            <div class="row">
                <div class="col-md-3 col-sm-6">
                    <div class="box">
                        <div class="box-img"><img src="./images0130/timg.jpeg" alt=""></div>
                        <div class="box-con">
                            <h4 class="title">标题</h4>
                            <p class="des">test$</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-3 col-sm-6">
                    <div class="box">
                        <div class="box-img"><img src="./images0130/timg.jpeg" alt=""></div>
                        <div class="box-con">
                            <h4 class="title">标题</h4>
                            <p class="des">test$</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-3 col-sm-6">
                    <div class="box">
                        <div class="box-img"><img src="./images0130/timg.jpeg" alt=""></div>
                        <div class="box-con">
                            <h4 class="title">标题</h4>
                            <p class="des">test$</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-3 col-sm-6">
                    <div class="box">
                        <div class="box-img"><img src="./images0130/timg.jpeg" alt=""></div>
                        <div class="box-con">
                            <h4 class="title">标题</h4>
                            <p class="des">test$</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>

    <script src="./images0130/bootstrap/js/bootstrap.min.js"></script>
</body>

</html>

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章