css实现四种不同的卡片悬浮倾斜动画效果代码-html代码-BFW代码库

css实现四种不同的卡片悬浮倾斜动画效果代码

代码语言：html

所属分类：悬停

代码描述：css实现四种不同的卡片悬浮倾斜动画效果代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">





    <style>
        * {
          box-sizing: border-box;
        }
        body {background:#A33A3D}
        
        p {
          font-family: Arial;
          color: #fff;
        }
        
        .row {
          width: 50%;
          border: 1px solid #ccc;
          margin: 20px auto;
          text-align: center;
          overflow: hidden;
          white-space: nowrap;
        }
        
        .panel-container {
          perspective: 1000px;
          display: inline-block;
        }
        .panel {
          display: inline-block;
          width: 150px;
          height: 200px;
          margin: 50px 0;
          background: #4682b4;
          background-size: 100%;
          background-repeat: no-repeat;
        }
        .panel-container:nth-child(1) .panel {
          background: url(//repo.bfw.wiki/bfwrepo/image/5e62ef20b92ee.png);
        }
        .panel-container:nth-child(2) .panel {
          background: url(//repo.bfw.wiki/bfwrepo/image/5e62ef20b92ee.png);
        }
        .panel-container:nth-child(3) .panel {
          background: url(//repo.bfw.wiki/bfwrepo/image/5e62ef20b92ee.png);
        }
        .panel-container:nth-child(4) .panel {
          background: url(//repo.bfw.wiki/bfwrepo/image/5e62ef20b92ee.png);
        }
        .panel-container:nth-child(5) .panel {
          background: url(//repo.bfw.wiki/bfwrepo/image/5e62ef20b92ee.png);
        }
        
        .rotate {
          transform: rotateY(40deg);
          transition: .3s;
        }
        .rotate:hover {
          transform: rotateY(0deg);
        }
        
        .overlap {
          margin-right: -20px;
          margin-left: -20px;
        }
        .overlap:hover {
          margin-right: 50px;
          margin-left: 50px;
        }
        .offset-origin {
          perspective-origin: 25% 83%;
        }
        
        .shadow {
          box-shadow: -15px 10px 30px rgba(0, 0, 0, 0.3);
        }
        .shadow:hover {
          box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.3);
        }
    </style>


</head>

<body>
    <div class="blur"></div>
    <!-- Perspective with overlap -->
    <div class="row">
        <div class="panel-container">
            <div class="panel rotate overlap shadow">
                <p>Panel 1</p>
            </div>
        </div>
        <div class="panel-container">
            <div class="panel rotate overlap shadow">
                <p>Panel 2</p>
            </div>
        </div>
        <div class="panel-container">
            <div class="panel rotate overlap shadow">
                <p>Panel 3</p>
            </div>
        </div>
        <div class=&q.........完整代码请登录后点击上方下载按钮下载查看