效果演示

實(shí)現(xiàn)了一個(gè)3D翻轉(zhuǎn)的卡片動(dòng)畫(huà)，其中每個(gè)卡片都有不同的圖片和不同的旋轉(zhuǎn)角度。整個(gè)動(dòng)畫(huà)循環(huán)播放，無(wú)限次。整個(gè)頁(yè)面的背景是一個(gè)占據(jù)整個(gè)屏幕的背景圖片，并且頁(yè)面內(nèi)容被隱藏在背景圖片之下。

Code

<div class="container">
    <div class="card-box">
        <div class="card">
            <img src="./img/鞠婧祎04.jpg">
        </div>
        <div class="card">
            <img src="./img/章若楠01.jpg">
        </div>
        <div class="card">
            <img src="./img/鞠婧祎02.jpg">
        </div>
    </div>
</div>

body {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #e8e8e8;
    overflow: hidden;
}

* {
    margin: 0;
    padding: 0;
}

.container {
    width: 600px;
    height: 350px;
    margin-top: 60px;
    perspective: 1000px;
    position: relative;
}

.card-box {
    position: absolute;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transform: rotateY(0) translateZ(-700px);
    animation: cardRotate 10s cubic-bezier(0.77, 0, 0.175, 1) infinite;
}

.card {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    -webkit-box-reflect: below 15px -webkit-linear-gradient(transparent 50%, rgba(255, 255, 255, 0.3));
}

.card img {
    width: 100%;
    height: 100%;
    border-radius: 10px;
}

.card:nth-child(1) {
    transform: rotateY(0) translateZ(700px);
}

.card:nth-child(2) {
    transform: rotateY(120deg) translateZ(700px);
}

.card:nth-child(3) {
    transform: rotateY(240deg) translateZ(700px);
}

@keyframes cardRotate {

    0%,
    20% {
        transform: translateZ(-700px) rotateY(0);
    }

    45% {
        transform: translateZ(-700px) rotateY(-120deg);
    }

    75% {
        transform: translateZ(-700px) rotateY(-240deg);
    }

    100% {
        transform: translateZ(-700px) rotateY(-360deg);
    }
}

實(shí)現(xiàn)思路拆分

body {
  height: 100vh; /* 設(shè)置頁(yè)面高度為視口高度 */
  display: flex; /* 使用彈性布局 */
  justify-content: center; /* 居中水平 */
  align-items: center; /* 居中垂直 */
  background-color: #e8e8e8; /* 設(shè)置背景顏色 */
  overflow: hidden; /* 隱藏溢出部分 */
}

這段代碼設(shè)置了頁(yè)面的基本樣式，包括高度、居中、背景顏色和溢出部分的隱藏。

* {
  margin: 0;
  padding: 0;
}

這段代碼取消了所有的內(nèi)外邊距，使得頁(yè)面更加整潔。

.container {
  width: 600px; /* 設(shè)置容器寬度 */
  height: 350px; /* 設(shè)置容器高度 */
  margin-top: 60px; /* 設(shè)置容器與頁(yè)面頂部的距離 */
  perspective: 1000px; /* 設(shè)置容器的透視效果 */
  position: relative; /* 設(shè)置容器為相對(duì)定位 */
}

這段代碼設(shè)置了容器的基本樣式，包括寬度、高度、與頁(yè)面頂部的距離、透視效果和相對(duì)定位。

.card-box {
  position: absolute;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transform: rotateY(0) translateZ(-700px);
  animation: cardRotate 10s cubic-bezier(0.77, 0, 0.175, 1) infinite;
}

這段代碼設(shè)置了卡片盒子的基本樣式，包括絕對(duì)定位、寬度、高度、3D效果、動(dòng)畫(huà)效果和無(wú)限次播放。

.card {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  -webkit-box-reflect: below 15px -webkit-linear-gradient(transparent 50%, rgba(255, 255, 255, 0.3));
}

這段代碼設(shè)置了卡片的基本樣式，包括絕對(duì)定位、寬度、高度、倒影效果。

.card img {
  width: 100%;
  height: 100%;
  border-radius: 10px;
}

這段代碼設(shè)置了卡片圖片的基本樣式，包括寬度、高度和圓角。

.card:nth-child(1) {
  transform: rotateY(0) translateZ(700px);
}

.card:nth-child(2) {
  transform: rotateY(120deg) translateZ(700px);
}

.card:nth-child(3) {
  transform: rotateY(240deg) translateZ(700px);
}

這段代碼設(shè)置了每張卡片的初始位置和旋轉(zhuǎn)角度。

@keyframes cardRotate {

  0%,
  20% {
    transform: translateZ(-700px) rotateY(0);
  }

  45% {
    transform: translateZ(-700px) rotateY(-120deg);
  }

  75% {
    transform: translateZ(-700px) rotateY(-240deg);
  }

  100% {
    transform: translateZ(-700px) rotateY(-360deg);
  }
}

這段代碼定義了一個(gè)名為cardRotate的動(dòng)畫(huà)，包括四個(gè)關(guān)鍵幀，分別對(duì)應(yīng)卡片的旋轉(zhuǎn)角度和位置。文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-817171.html

到了這里，關(guān)于HTML+CSS：3D輪播卡片的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！