今天我們來做一個炫一點的3D動畫效果，動畫效果是C3中新增的屬性，今天這個效果很適合我們平時娛樂時做，如果你覺得效果太單調也可以自行添加一些其他特效哦，以下圖片也可以替換成自己的圖片哦

這個視屏就是動畫的效果哦

Video_2020-12-26

HTML布局

html的布局結構簡單，下面就不做過多的解釋了，其代碼如下：

<div class="container"><div class="box1 a"></div><div class="box2 a"></div><div class="box3 a"></div><div class="box4 a"></div><div class="box5 a"></div><div class="box6 a"></div><div class="small"><div class="pox1 b"></div><div class="pox2 b"></div><div class="pox3 b"></div><div class="pox4 b"></div><div class="pox5 b"></div><div class="pox6 b"></div></div></div>

CSS代碼如下

<style>* {padding: 0;margin: 0;}/* 外面大盒子容器 */.container {width: 500px;height: 500px;margin: 500px auto;position: relative;/* 3d視圖效果 */transform-style: preserve-3d;perspective: 1000px;}/* 大盒子公共屬性設置 */.a {width: 500px;height: 500px;position: absolute;/* 透明度為0.8 */opacity: .8;}/* 里面的小容器 */.small {width: 200px;height: 200px;position: relative;transform-style: preserve-3d;left: 150px;top: 150px;}/* 小容器里的圖片公共樣式 */.b {width: 200px;height: 200px;position: absolute;opacity: .8;}/* 此為正面圖片,不旋轉,沿著Z軸向前動盒子一半的寬度即250px */.box1 {background-image: url(./images/1.jpg);transform: rotateX(0deg) translateZ(250px);}/* 此為后面圖片,沿著Z軸向前移動盒子一半的寬度即250px，沿X軸旋轉180度， */.box2 {background-image: url(./images/2.jpg);transform: rotateX(180deg) translateZ(250px);}/* 此為右面的圖片，,沿著Z軸向前移動盒子一半的寬度即250px,沿Y軸轉90度， */.box3 {background-image: url(./images/3.jpg);transform: rotateY(90deg) translateZ(250px);}/* 此為左面的圖片，,沿著Z軸向前移動盒子一半的寬度即250px,沿Y軸轉90度， */.box4 {background-image: url(./images/7.jpg);transform: rotateY(-90deg) translateZ(250px);}/* 此為上面的圖片，,沿著Z軸向前移動盒子一半的寬度即250px,沿Y軸轉90度， */.box5 {background-image: url(./images/8.jpg);transform: rotateX(90deg) translateZ(250px);}/* 此為下面的圖片，,沿著Z軸向前移動盒子一半的寬度即250px,沿Y軸轉90度， */.box6 {background-image: url(./images/6.jpg);transform: rotateX(-90deg) translateZ(250px);}/* 小盒子原理與大盒子原理相同 */.pox1 {background-image: url(./images/01.jpg);transform: rotateX(0deg) translateZ(100px);}.pox2 {background-image: url(./images/02.jpg);transform: rotateX(180deg) translateZ(100px);}.pox3 {background-image: url(./images/03.jpg);transform: rotateY(90deg) translateZ(100px);}.pox4 {background-image: url(./images/04.jpg);transform: rotateY(-90deg) translateZ(100px);}.pox5 {background-image: url(./images/05.jpg);transform: rotateX(90deg) translateZ(100px);}.pox6 {background-image: url(./images/06.jpg);transform: rotateX(-90deg) translateZ(100px);}.container {/* 為大盒子開啟動畫效果，動畫名稱為go,5秒完成一次，勻速轉動，沒有延遲，無數次 */animation: go 5s linear 0s infinite;}.small {/* 為小盒子開啟動畫效果，動畫名稱為go,2秒完成一次，勻速轉動，沒有延遲，無數次 */animation: go 2s linear 0s infinite;}@keyframes go {0% {transform: rotate3d(0.5, 0.5, -0.5, 0deg);}100% {transform: rotate3d(0.5, 0.5, -0.5, 360deg);}}/* 同上同上，只是鼠標經過時移動距離變大了 */.container:hover .box1 {transform: rotateX(0deg) translateZ(350px);}.container:hover .box2 {transform: rotateX(180deg) translateZ(350px);}.container:hover .box3 {transform: rotateY(90deg) translateZ(350px);}.container:hover .box4 {transform: rotateY(-90deg) translateZ(350px);}.container:hover .box5 {transform: rotateX(90deg) translateZ(350px);}.container:hover .box6 {transform: rotateX(-90deg) translateZ(350px);}</style>

這樣就完成了一個好看的動畫效果了，快去發給你們的女朋友吧，哈哈哈！！！

總結

以上是生活随笔為你收集整理的3D炫彩动画效果的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。