前言
現(xiàn)如今網(wǎng)頁越來越趨近于動畫，相信大家平時瀏覽網(wǎng)頁或多或少都能看到一些動畫效果，今天我們來做一個有意思的動畫效果，通過 css3 實現(xiàn) 3d 效果的立方體相冊，下面一起看看吧。
實現(xiàn)思路
- 首先我們要確定好
html的結(jié)構(gòu)以及要使用的標簽； - 當我們搭建好
html的結(jié)構(gòu)后，就要想到怎么去實現(xiàn)立體的效果； - 最后就是如何實現(xiàn)旋轉(zhuǎn)以及鼠標觸摸時變換的效果。
html 布局
<div class="parentBox">
<div class="contantBox">
<div class="outerBox">
<!--======================= 外部正方體 =======================-->
<!-- 外前圖 -->
<div class="frontImgBox"><img src="../assets/tu1.jpg" /></div>
<!-- 外后圖 -->
<div class="queenImgBox"><img src="../assets/tu2.jpg" /></div>
<!-- 外左圖 -->
<div class="liftImgBox"><img src="../assets/tu3.jpg" /></div>
<!-- 外右圖 -->
<div class="rightImgBox"><img src="../assets/tu4.jpg" /></div>
<!-- 外上圖 -->
<div class="topImgBox"><img src="../assets/tu5.jpg" /></div>
<!-- 外下圖 -->
<div class="bottomImgBox"><img src="../assets/tu6.jpg" /></div>
<!--======================= 內(nèi)部正方體 =======================-->
<!-- 內(nèi)前圖 -->
<p class="inFrontImgBox"><img src="../assets/tu7.jpg" /></p>
<!-- 內(nèi)后圖 -->
<p class="inqueenImgBox"><img src="../assets/tu8.jpg" /></p>
<!-- 內(nèi)左圖 -->
<p class="inLeftImgBox"><img src="../assets/tu9.jpg" /></p>
<!-- 內(nèi)右圖 -->
<p class="inRightImgBox"><img src="../assets/tu10.jpg" /></p>
<!-- 內(nèi)上圖 -->
<p class="inTopImgBox"><img src="../assets/tu11.jpg" /></p>
<!-- 內(nèi)下圖 -->
<p class="inBottomImgBox"><img src="../assets/tu12.jpg" /></p>
</div>
</div>
</div>
立體的效果
立體效果的核心就是運用 css3 中的 transform-style 屬性。
transform-style 屬性
transform-style 屬性用來指定嵌套元素是怎樣在三維空間中呈現(xiàn)。當值為 flat 時，表示所有子元素在 2D 平面呈現(xiàn)；值為 preserve-3d 時，表示所有子元素在 3D 空間中呈現(xiàn)。
| 屬性值 | 描述 |
|---|---|
| flat（默認值） | 將設(shè)置元素的子元素位于該元素的平面中 |
| preserve-3d | 將指示元素的子元素應(yīng)位于 3D 空間中 |
注意：
- 該屬性必須與
transform屬性一同使用，否則沒效果； - 該屬性不能被子元素繼承；
- 該屬性的效果作用于子元素，不作用于自身。
旋轉(zhuǎn)和變換的效果
旋轉(zhuǎn)及變換的效果我們則需要通過 animation 屬性和 hover 偽類屬性的配合來實現(xiàn)。
旋轉(zhuǎn)核心代碼
.outerBox{
-webkit-animation: rotate 10s infinite;
}
@-webkit-keyframes rotate {
from {
transform: rotateX(0deg) rotateY(0deg);
}
to {
transform: rotateX(360deg) rotateY(360deg);
}
}
變換核心代碼
.outerBox:hover .frontImgBox {
transform: rotateY(0deg) translateZ(200px);
}
.outerBox:hover .queenImgBox {
transform: translateZ(-200px) rotateY(180deg);
}
.outerBox:hover .liftImgBox {
transform: rotateY(90deg) translateZ(200px);
}
.outerBox:hover .rightImgBox {
transform: rotateY(-90deg) translateZ(200px);
}
.outerBox:hover .topImgBox {
transform: rotateX(90deg) translateZ(200px);
}
.outerBox:hover .bottomImgBox {
transform: rotateX(-90deg) translateZ(200px);
}
到這里為止，我們已經(jīng)將整個功能的核心要點分析完畢，話不多說，下面一起來看完整的源碼?。
完整源碼
<template>
<div class="parentBox">
<div class="contantBox">
<div class="outerBox">
<!--======================= 外部正方體 =======================-->
<!-- 外前圖 -->
<div class="frontImgBox"><img src="../assets/tu1.jpg" /></div>
<!-- 外后圖 -->
<div class="queenImgBox"><img src="../assets/tu2.jpg" /></div>
<!-- 外左圖 -->
<div class="liftImgBox"><img src="../assets/tu3.jpg" /></div>
<!-- 外右圖 -->
<div class="rightImgBox"><img src="../assets/tu4.jpg" /></div>
<!-- 外上圖 -->
<div class="topImgBox"><img src="../assets/tu5.jpg" /></div>
<!-- 外下圖 -->
<div class="bottomImgBox"><img src="../assets/tu6.jpg" /></div>
<!--======================= 內(nèi)部正方體 =======================-->
<!-- 內(nèi)前圖 -->
<p class="inFrontImgBox"><img src="../assets/tu7.jpg" /></p>
<!-- 內(nèi)后圖 -->
<p class="inqueenImgBox"><img src="../assets/tu8.jpg" /></p>
<!-- 內(nèi)左圖 -->
<p class="inLeftImgBox"><img src="../assets/tu9.jpg" /></p>
<!-- 內(nèi)右圖 -->
<p class="inRightImgBox"><img src="../assets/tu10.jpg" /></p>
<!-- 內(nèi)上圖 -->
<p class="inTopImgBox"><img src="../assets/tu11.jpg" /></p>
<!-- 內(nèi)下圖 -->
<p class="inBottomImgBox"><img src="../assets/tu12.jpg" /></p>
</div>
</div>
</div>
</template>
<style lang="less" scoped>
.parentBox {
height: 100%;
background: rgb(31, 31, 31);
padding: 200px;
.contantBox {
width: 200px;
height: 200px;
margin: 0px auto;
position: relative;
.outerBox {
width: 200px;
height: 200px;
margin: 0 auto;
transform-style: preserve-3d;
transform: rotateX(-30deg) rotateY(-80deg);
-webkit-animation: rotate 10s infinite;
animation-timing-function: linear; //勻速
// 外部正反體樣式
div {
position: absolute;
width: 200px;
height: 200px;
opacity: 0.75;
transition: all 0.4s;
img {
width: 100%;
height: 100%;
}
}
.frontImgBox {
transform: rotateY(0deg) translateZ(100px);
}
.queenImgBox {
transform: translateZ(-100px) rotateY(180deg);
}
.liftImgBox {
transform: rotateY(90deg) translateZ(100px);
}
.rightImgBox {
transform: rotateY(-90deg) translateZ(100px);
}
.topImgBox {
transform: rotateX(90deg) translateZ(100px);
}
.bottomImgBox {
transform: rotateX(-90deg) translateZ(100px);
}
@-webkit-keyframes rotate {
from {
transform: rotateX(0deg) rotateY(0deg);
}
to {
transform: rotateX(360deg) rotateY(360deg);
}
}
// 內(nèi)部正方體樣式
p {
display: bloack;
width: 100px;
height: 100px;
position: absolute;
top: 50px;
left: 50px;
img {
width: 100%;
height: 100%;
}
}
.inFrontImgBox {
transform: rotateY(0deg) translateZ(50px);
}
.inqueenImgBox {
transform: translateZ(-50px) rotateY(180deg);
}
.inLeftImgBox {
transform: rotateY(90deg) translateZ(50px);
}
.inRightImgBox {
transform: rotateY(-90deg) translateZ(50px);
}
.inTopImgBox {
transform: rotateX(90deg) translateZ(50px);
}
.inBottomImgBox {
transform: rotateX(-90deg) translateZ(50px);
}
}
// 鼠標觸摸后樣式
.outerBox:hover {
cursor: pointer;
}
.outerBox:hover .frontImgBox {
transform: rotateY(0deg) translateZ(200px);
}
.outerBox:hover .queenImgBox {
transform: translateZ(-200px) rotateY(180deg);
}
.outerBox:hover .liftImgBox {
transform: rotateY(90deg) translateZ(200px);
}
.outerBox:hover .rightImgBox {
transform: rotateY(-90deg) translateZ(200px);
}
.outerBox:hover .topImgBox {
transform: rotateX(90deg) translateZ(200px);
}
.outerBox:hover .bottomImgBox {
transform: rotateX(-90deg) translateZ(200px);
}
}
}
</style>
實現(xiàn)效果
拓展
旋轉(zhuǎn)視差效果
<template>
<div class="box">
<div class="item">
<img src="../../img/fj1.png" alt="">
</div>
<div class="item">
<img src="../../img/fj2.png" alt="">
</div>
<div class="item">
<img src="../../img/fj3.png" alt="">
</div>
<div class="item">
<img src="../../img/fj4.png" alt="">
</div>
<div class="item">
<img src="../../img/fj5.png" alt="">
</div>
</div>
</template>
<style scoped>
.box {
width: 300px;
height: 300px;
margin: 0 auto;
margin-top: 100px;
/* 網(wǎng)格布局 */
display: grid;
grid-template-columns: repeat(3, 1fr); /* 3列 */
grid-template-rows: repeat(3, 1fr); /* 3行 */
grid-template:
"A A B"
"C D B"
"C E E";
gap: 5px; /* 間隙 */
animation: rotation 10s linear infinite;
}
.item {
overflow: hidden;
border: 2px solid;
display: flex;
justify-content: center;
align-items: center;
}
.item img {
width: 260%;
height: 260%;
object-fit: cover;
animation: rotation2 10s linear infinite;
}
/* 布局到那個區(qū)域 */
.item:nth-child(1) {
grid-area: A;
}
.item:nth-child(2) {
grid-area: B;
}
.item:nth-child(3) {
grid-area: C;
}
.item:nth-child(4) {
grid-area: D;
}
.item:nth-child(5) {
grid-area: E;
}
/* 外層順時針旋轉(zhuǎn) */
@keyframes rotation {
to {
transform: rotate(360deg);
}
}
/* 外層逆時針旋轉(zhuǎn) */
@keyframes rotation2 {
to {
transform: rotate(-360deg);
}
}
</style>
實現(xiàn)效果文章來源：http://www.zghlxwxcb.cn/news/detail-415071.html
文章來源地址http://www.zghlxwxcb.cn/news/detail-415071.html
到了這里，關(guān)于教你用 CSS 實現(xiàn)超真實的 3D 相冊，讓你的照片立體感 UPUP的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
