css实现三维3d折叠面板打开iframe页面链接效果代码-html代码-BFW代码库

代码语言：html

代码描述：css实现三维3d折叠面板打开iframe页面链接效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!doctype html>
<html lang="zh" class="no-js">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/modernizr.custom.2.8.1.js"></script>
    <style>
        /* --------------------------------

Primary style

-------------------------------- */
        *, *::after, *::before {
            box-sizing: border-box;
        }

        html {
            font-size: 62.5%;
        }

        body {
            font-size: 1.6rem;
            font-family: "Open Sans", sans-serif;
            color: #363558;
            background-color: #1c1726;
        }

        a {
            color: #544173;
            text-decoration: none;
        }

        h1, h2 {
            font-family: "Vollkorn", serif;
        }

        /* --------------------------------

Patterns - reusable parts of our design

-------------------------------- */
        .overflow-hidden {
            overflow: hidden;
        }

        /* --------------------------------

Header

-------------------------------- */
        /*header {
  height: 170px;
  line-height: 170px;
  text-align: center;
  background: #ffffff;
}
header h1 {
  font-size: 2.2rem;
  color: #363558;
}
@media only screen and (min-width: 600px) {
  header {
    height: 200px;
    line-height: 200px;
  }
  header h1 {
    font-size: 3rem;
  }
}*/

        /* --------------------------------

Main content

-------------------------------- */
        .cd-main {
            overflow-x: hidden;
        }
        .cd-main::before {
            /* never visible - this is used in jQuery to check the current MQ */
            display: none;
            content: 'mobile';
        }
        .cd-main > * {
            -webkit-transition: -webkit-transform 0.5s 0.4s;
            -moz-transition: -moz-transform 0.5s 0.4s;
            transition: transform 0.5s 0.4s;
        }
        .cd-main.fold-is-open > * {
            /* on mobile - translate .cd-main content to the right when the .cd-folding-panel is open */
            -webkit-transform: translateX(100%);
            -moz-transform: translateX(100%);
            -ms-transform: translateX(100%);
            -o-transform: translateX(100%);
            transform: translateX(100%);
            -webkit-transition: -webkit-transform 0.5s 0s;
            -moz-transition: -moz-transform 0.5s 0s;
            transition: transform 0.5s 0s;
        }
@media only screen and (min-width: 600px) {
            .cd-main.fold-is-open > * {
                -webkit-transform: translateX(600px);
                -moz-transform: translateX(600px);
                -ms-transform: translateX(600px);
                -o-transform: translateX(600px);
                transform: translateX(600px);
            }
        }
@media only screen and (min-width: 1100px) {
            .cd-main::before {
                /* never visible - this is used in jQuery to check the current MQ */
                content: 'desktop';
            }
            .cd-main.fold-is-open > * {
                /* reset style - on bigger devices we translate the gallery items */
                -webkit-transform: translateX(0);
                -moz-transform: translateX(0);
                -ms-transform: translateX(0);
                -o-transform: translateX(0);
                transform: translateX(0);
            }
        }

        .cd-gallery::after {
            clear: both;
            content: "";
            display: table;
        }
        .cd-gallery::before {
            /* this is the dark layer covering the .cd-gallery when the .cd-folding-panel is open */
            display: block;
            content: '';
            position: absolute;
            z-index: 1;
            top: 0;
            left: 0;
            height: 100%;
            width: 100%;
            background-color: rgba(28, 23, 38, 0.6);
            opacity: 0;
            visibility: hidden;
            -webkit-transition: opacity 0.5s 0.4s, visibility 0s 0.9s;
            -moz-transition: opacity 0.5s 0.4s, visibility 0s 0.9s;
            transition: opacity 0.5s 0.4s, visibility 0s 0.9s;
        }
        .fold-is-open .cd-gallery::before {
            visibility: visible;
            opacity: 1;
            -webkit-transition: opacity 0.5s 0s, visibility 0s 0s;
            -moz-transition: opacity 0.5s 0s, visibility 0s 0s;
            transition: opacity 0.5s 0s, visibility 0s 0s;
        }

        .cd-item {
            width: 100%;
            height: 300px;
            text-align: center;
            /* Force Hardware Acceleration */
            -webkit-transform: translateZ(0);
       .........完整代码请登录后点击上方下载按钮下载查看