3d悬浮翻转卡片效果-html代码-BFW代码库

代码语言：html
所属分类：悬停
代码描述：3d悬浮翻转卡片效果
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>css鼠标悬停立体反转效果</title>
    <style>
        .baozhang {
            float: left;
            width: 100%
        }

        .title {
            text-align: center
        }

        .title h4 {
            font-size: 30px;
            line-height: 30px
        }

        .title p {
            font-size: 16px;
            line-height: 10px;
            margin-top: -20px
        }

        .clearfix:after {
            display: block;
            content: '';
            clear: both
        }

        .clearfix {
            zoom: 1;
            text-align: center
        }

        .fl {
            float: left
        }

        .fr {
            float: right
        }

        .part5 .tBox {
            width: 1154px;
            height: 430px;
            margin: 30px auto 0;
            position: relative
        }

        .part5 .tBox .picBox {
            width: 1000px;
            margin: 0 auto;
            height: 100%;
            overflow: hidden;
            position: relative
        }

        #posBox {
            width: 2048px;
            position: absolute;
            left: 0;
            top: 0
        }

        .part5 .tBox .picBox .roll {
            position: relative;
            margin-right: 24px;
            perspective: 1000px;
            cursor: pointer
        }

        .part5 .tBox .picBox li .bg {
            width: 100%;
            height: 65px;
            background: #000;
            opacity: .8;
            filter: alpha(opacity=80);
            position: absolute;
            left: 0;
            bottom: 0
        }

        .part5 .tBox .picBox li h3 {
            position: absolute;
            left: 0;
            bottom: 0;
            width: 100%;
            height: 65px;
            text-align: left;
            padding-left: 13px
        }

        .part5 .tBox .picBox li .tName {
            font-size: 18px;
            color: #fff;
            padding-top: 13px;
            margin-bottom: 5px
        }

        .part5 .tBox .picBox li .tTitle {
            font-size: 12px;
            color: #b4b4b4
        }

        .roll .box-content {
            width: 100%;
            height: 480px;
            position: absolute;
            top: 0;
            left: 0;
            background: #000;
            opacity: .8;
            filter: alpha(opacity=80);
            transform: rotateY(90deg);
            transition: all .5s ease-in-out 0s;
            overflow: hidden
        }

        .roll .box-img {
            transform: rotateY(0);
            transition: all .5s ease-in-out 0s
        }

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

        .roll:hover .box-content {
            transform: rotateY(0)
        }

        .roll .box-content .t1,.roll .box-content2 .t1 {
            font-size: 20px;
            font-weight: 700;
            color: #fff;
            padding-top: 50px
        }

        .roll .box-content .t2,.roll .box-content2 .t2 {
            font-size: 16px;
            color: #fff;
            padding-top: 12px
        }

        .roll .box-content .t3,.roll .box-content2 .t3 {
            width: 190px;
            height: 1px;
            background: #fff;
            margin: 20px auto 0
        }

        .roll .box-content .t4,.roll .box-content2 .t4 {
            font-size: 14px;
            width: 182px;
            text-align: justify;
            color: #fff;
            margin: 20px auto 0
        }

        .box-content2 {
            position: absolute;
            left: 0;
            top: -470px;
            width: 100%;
            height: 100%;
            background: #000;
            opacity: .7;
            filter: alpha(opacity=70);
            color: #fff
        }

        .anniuk {
            width: 100%;
            float: left;
            text-align: center
        }

        .anniu {
            border: 1px solid #0d0d0d;
            height: 60px;
            width: 550px;
            line-height: 60px;
            text-align: center;
            border-radius: 200px;
            margin-top: 40px;
            margin-bottom: 40px;
            cursor: pointer;
            font-size: 30px;
            display: inline-block
        }

        .anniu:hover {
            background: #ffc670;
            transform: scale(1.05);
            transition: all .5s
        }
    </style>
</head>
<body>

    <div class="baozhang">
        <div class="part1 part5">
            <div class="title">
                <h4>四大保障险介绍</h4>
                <p>
                    详细条款内容以合同为准
                </p>
            </div>
            <div class="tBox">
                <div class="picBox">
                    <div class="clearfix" id="posBox">
                        <div class="fl roll">
                            <div class="box-img">
                                <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOgAAAGuCAYAAACa30q9AAAgAElEQVR4Xu19fdAmVXXn6edlxplBBmVm1pQxMnFAsBxK2UoJaG0MJlYpsFR0FTS7q0BSCZq1VpZ1N4IQFUV3XTemdI1JJdG4m2iU1ZQrmi0T/Njiy1BrLLACC7qAQszCIMyoM87M8/TWOfec26f76a/nfbvn7affX/8h4/t03779u/d3z7nn6yZpmqaECwgAgUEikICggxwXdAoICAIgKCYCEBgwAiDogAcHXQMCICjmABAYMAIg6IAHB10DAiAo5gAQGDACIOiABwddAwIgKOYAEBgwAiDogAcHXQMCICjmABAYMAIg6IAHB10DAiAo5gAQGDACIOiABwddAwIgKOYAEBgwAiDogAcHXQMCICjmABAYMAIg6IAHB10DAiAo5gAQGDACIOiABwddAwIgKOYAEBgwAiDogAcHXQMCICjmABAYMAIg6IAHB10DAiAo5gAQGDACIOiABwddAwIgKOYAEBgwAiDogAcHXQMCICjmABAYMAIg6IAHB10DAiAo5gAQGDACIOiABwddAwIgKOYAEBgwAiDogAcHXQMCICjmABAYMAIg6IAHB10DAiAo5gAQGDACIOiABwddAwIgKOYAEBgwAiDogAcHXQMCICjmABAYMAIg6IAHB10DAiAo5gAQGDACIOiABwddAwIgKOYAEBgwAiDogAcHXQMCICjmABAYMAIg6IAHB10DAiAo5gAQGDACIOiABwddAwIgKOYAEBgwAiDogAcHXQMCICjmABAYMAIg6IAHB10DAiAo5gAQGDACIOiABwddAwIgKOYAEBgwAiDogAcHXQMCICjmABAYMAIg6IAHB10DAiAo5gAQGDACIOiABwddAwIgKOYAEBgwAiDogAcHXQMCICjmABAYMAIg6IAHB10DAiAo5gAQGDACIOiABwddAwIgKOYAEBgwAiDogAcHXQMCICjmABAYMAIg6IAHB10DAiAo5gAQGDACIOiABwddAwIgKOYAEBgwAiDogAcHXQMCICjmABAYMAIg6IAHB10DAiAo5gAQGDACIOiABwddAwIgKOYAEBgwAiDogAcHXQMCICjmABAYMAIg6IAHB10DAiAo5gAQGDACIOiABwddAwIgKOYAEBgwAiDogAcHXQMCICjmABAYMAIg6IAHB10DAiAo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.........完整代码请登录后点击上方下载按钮下载查看