「抖音最火」的3D旋轉透視酷炫相冊，如何用CSS3去

「抖音最火」的3D旋轉透視酷炫相冊，如何用CSS3去實現

言

前段時間小編刷抖音的時候，刷到了咱們前端小伙伴制作的3D炫酷相冊，居然那么火，細思一下，隨著3D動畫的普及，廣泛的運作在各個平臺，各官網都在實現3D頁面。它可以更接近于真實的展示我們的產品和介紹，帶來極強的視覺沖擊感。所以說，為了讓自己更加優秀，css3 3D動畫必不可少。下面這篇文章，將帶你初步了解CSS3實現酷炫的3D旋轉透視

要想自己的網頁能有3D特效，必須要會透視。

透視 perspective(基礎問題，可以在我的推薦書籍中學習到)

在2D平面產生近大遠小視覺立體，但是只是效果二維的
如果想在網頁產生3D效果需要透視（理解成3D物體投影在2D平面內）。
模擬人類的視覺位置，可認為安排一只眼睛去看
透視我們也稱為視距：視距就是人的眼睛到屏幕的距離
距離視覺點越近的在電腦平面成像越大，越遠成像越小
透視的單位是像素

圖片來源網絡

正文：

CSS3 3D 轉換的常用API介紹

CSS3 3D 應用場景

CSS3 3D 實現一個立方體

1.CSS3 3D 轉換的常用API介紹

首先先上一張css 3D的坐標系：

接下來我們來介紹幾個常用的api：

旋轉

rotateX()
rotateY()
rotateZ() 以上幾個api分別代表繞x，y，z軸旋轉，如下例子為繞x軸旋轉的例子：

相關代碼如下：

<style>
.d3-wrap {
 position: relative;
 width: 300px;
 height: 300px;
 margin: 120px auto;
 /* 規定如何在 3D 空間中呈現被嵌套的元素 */
 transform-style: preserve-3d;
 transform: rotateX(0) rotateY(45deg);
 transform-origin: 150px 150px 150px;
}

.rotateX {
 width: 200px;
 height: 200px;
 background-color: #06c;
 transition: transform 2s;
 animation: rotateX 6s infinite;
}

@keyframes rotateX {
 0% {
 transform: rotateX(0);
 }
 100% {
 transform: rotateX(360deg);
 } 
}
</style>
<div class="d3-wrap">
 <div class="rotateX"></div>
</div>
復制代碼

位移（Transform）

translateX(x) 定義 3D 轉化，僅使用用于 X 軸的值
translateY(y) 定義 3D 轉化，僅使用用于 Y 軸的值
translateZ(z) 定義 3D 轉化，僅使用用于 Z 軸的值以上幾個api分別代表相對x，y，z軸的位移，如下例子為向z軸位移的例子：

這里我們需要注意的是為了能看出位移的效果，我們需要在父容器上加如下屬性：

.d3-wrap {
 transform-style: preserve-3d;
 perspective: 500;
 /* 設置元素被查看位置的視圖 */
 -webkit-perspective: 500;
}

當為元素定義 perspective 屬性時，其子元素會獲得透視效果，而不是元素本身。代碼如下：

.d3-wrap {
 position: relative;
 width: 300px;
 height: 300px;
 margin: 120px auto;
 transform-style: preserve-3d;
 perspective: 500;
 -webkit-perspective: 500;
 transform: rotateX(0) rotateY(45deg);
 transform-origin: center center;
}

.transformZ {
 width: 200px;
 height: 200px;
 background-color: #06c;
 transition: transform 2s;
 animation: transformZ 6s infinite;
}

@keyframes transformZ {
 0% {
 transform: translateZ(100px);
 }
 100% {
 transform: translateZ(0);
 } 
}

3D縮放

scaleX(x) 給定一個 X 軸的3D 縮放轉換值
scaleY(x) 給定一個 Y 軸的3D 縮放轉換值
scaleZ(x) 給定一個 Z 軸的3D 縮放轉換值縮放設置和上面的類似，這里就不做過多介紹了。

理論上說以上三種常見變換已經夠用了，值得關注的是我們要想讓元素呈現出3D效果，以下不可忽視的API也很重要：

2.CSS3 3D 應用場景

css 3D主要應用在網站的交互和模型效果上，比如：

3D輪播圖
3D產品介紹
室內3D仿真
h5 3D活動頁面，比較典型的就是某年淘寶的年終總結H5
3D數據可視化成圖
3D模型圖其實如果css 3D用的熟悉了，一些基本的3D模型完全可以用css畫出來。

3.CSS3 3D 實現一個立方體

核心思路就是用6個面去拼接，通過設置rotate和translate來調整相互之間的位置，如下：

具體代碼如下：

.container {
 position: relative;
 width: 300px;
 height: 300px;
 margin: 120px auto;
 transform-style: preserve-3d;
 /* 為了讓其更有立體效果 */
 transform: rotateX(-30deg) rotateY(45deg);
 transform-origin: 150px 150px 150px;
 animation: rotate 6s infinite;
}
.container .page {
 position: absolute;
 width: 300px;
 height: 300px;
 text-align: center;
 line-height: 300px;
 color: #fff;
 background-size: cover;
}
.container .page:first-child {
 background-image: url(./my.jpeg);
 background-color: rgba(0,0,0,.2);
}
.container .page:nth-child(2) {
 transform: rotateX(90deg);
 transform-origin: 0 0;
 transition: transform 10s;
 background-color: rgba(179, 15, 64, 0.6);
 background-image: url(./my2.jpeg);
}

.container .page:nth-child(3) {
 transform: translateZ(300px);
 background-color: rgba(22, 160, 137, 0.7);
 background-image: url(./my3.jpeg);
}

.container .page:nth-child(4) {
 transform: rotateX(-90deg);
 transform-origin: -300px 300px;
 background-color: rgba(210, 212, 56, 0.2);
 background-image: url(./my4.jpeg);
}
.container .page:nth-child(5) {
 transform: rotateY(-90deg);
 transform-origin: 0 0;
 background-color: rgba(201, 23, 23, 0.6);
 background-image: url(./my5.jpeg);
}
.container .page:nth-child(6) {
 transform: rotateY(-90deg) translateZ(-300px);
 transform-origin: 0 300px;
 background-color: rgba(16, 149, 182, 0.2);
 background-image: url(./my6.jpeg);
}

html結構

<div class="container">
 <div class="page">A</div>
 <div class="page">B</div>
 <div class="page">C</div>
 <div class="page">D</div>
 <div class="page">E</div>
 <div class="page">F</div>
</div>

擴展

我們可以基于上面介紹的，給父元素添加動畫或者拖拽效果，這樣就可以做成更有交互性的3D方塊了，比如置骰子游戲，vr場景，3D相冊等等，具體實現我會抽空依次總結出來，記得關注哦～

作者：徐小夕_Lab實驗室
鏈接：https://juejin.im/post/5dd16b39f265da0bca78958e

喜歡小編的可以點個贊關注小編哦，小編每天都會給大家分享文章。

我自己是一名從事了多年的前端老程序員，小編為大家準備了新出的前端編程學習資料，免費分享給大家！

如果你也想學習前端，那么幫忙轉發一下然后再關注小編后私信【1】可以得到我整理的這些前端資料了（私信方法：點擊我頭像進我主頁有個上面有個私信按鈕）

一、項目背景】

隨著HTML5 CSS3的出現和發展，使得我們的網頁可以實現更加復雜的效果，也使得我們的瀏覽體驗更加豐富，所以今天我們將制作一個正方體的3D效果。

【二、項目分析】

想要利用CSS3實現3D立方體，就要清楚立方體是由六個面組成，分上下左右和前后，考慮這些可以幫助我們更好的融入CSS3的代碼。

因此我設置了6個div，作為立方體的6個面。因為定位的原因，一開始所有的盒子都是面對著屏幕這面的，因此要賦予每個面不一樣的值，即不一樣的位置它才能展現出來。

【三、需要的工具】

Adobe Dreamweaver

【四、項目目標】

實現3的l立方體旋轉，鼠標移上去實現縮放效果。

【五、項目實現】

1、打開Adobe Dreamweaver，新建html文檔。把標題改為“3d立方體”。

2、在body標簽，創建一個div盒子，給它class屬性，在外層div里面在創建6個div表示立方體的六個面，同樣給它們 class屬性。

<body>
    <div class="box">
      <div class="box2">
        <div class="box-2">top</div>
        <div class="box-2">btm</div>
        <div class="box-2">left</div>
        <div class="box-2">right</div>
        <div class="box-2">face</div>
        <div class="box-2">back</div>
      </div>
    </div>
</body>

3、創建CSS樣式

<style type="text/css">
.box {
  width: 200px;
  height: 200px;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  transition: all 2s;
  transform-style: preserve-3d;
  transform: rotateX(15deg) rotateY(-15deg);
}
.box:hover {
  transform: rotateX(300deg) rotateZ(300deg) rotateY(-300deg) scale(0.5);
}
.box .box-2 {
  width: 100px;
  height: 100px;
  text-align: center;
  line-height: 100px;
  font-size: 1.2em;
  position: absolute;
  top: 0;
  left: 0;
}
.box .box-2:nth-child(1) {
  /*小立方體第一面*/
  background: rgba(225,0,0,0.5);
  transform: rotateX(90deg) translateZ(50px); #角度 偏移量
}
.box .box-2:nth-child(2) {
    /*小立方體第二面*/
  background: rgba(255,255,0,0.5);
  transform: rotateX(-90deg) translateZ(50px);
}
.box .box-2:nth-child(3) {
    /*小立方體第三面*/
  background: rgba(225,0,255,0.5);
  transform: rotateY(-90deg) translateZ(50px);
}
.box .box-2:nth-child(4) {
     /*小立方體第四面*/
  background: rgba(0,255,0,0.5);
  transform: rotateY(90deg) translateZ(50px);
}
.box .box-2:nth-child(5) {
     /*小立方體第五面*/
  background: rgba(225,0,0,0.5);
  transform: translateZ(50px);
}
.box .box-2:nth-child(6) {
    /*小立方體第六面*/
  background: rgba(0,0,255,0.5);
  transform: rotateY(180deg) translateZ(50px);
}
</style>
  </head>
  <body>
    <div class="box">
      <div class="box2">
        <div class="box-2">top</div>
        <div class="box-2">btm</div>
        <div class="box-2">left</div>
        <div class="box-2">right</div>
        <div class="box-2">face</div>
        <div class="box-2">back</div>
      </div>
    </div>
</body>
</html>

方法說明：

rotateX() 方法

通過 rotateX() 方法，元素圍繞其 X 軸以給定的度數進行旋轉。

rotateY() 旋轉

通過 rotateY() 方法，元素圍繞其 Y 軸以給定的度數進行旋轉。

rotateZ() 旋轉

通過 rotateZ() 方法，元素圍繞其 Z 軸以給定的度數進行旋轉。

下表是部分屬性所代表的含義：

4、運行一下看下效果；點擊F12運行。

5、呈現的效果如下圖所示。

可以看到效果基本上可以，可是鼠標移上去沒有效果。

6、添加鼠標移上去縮放的效果

.box:hover{
    transform: rotateX(300deg) rotateZ(300deg) rotateY(-300deg) scale(0.5);

  } # scale是縮放倍數

7、外層再添加一個3d立方體形成疊加效果

body代碼：

<div class="box">
<div class="box-1">top</div>
<div class="box-1">btm</div>
<div class="box-1">left</div>
<div class="box-1">right</div>
<div class="box-1">face</div>
<div class="box-1">back</div>
</div>

CSS樣式代碼

<style type="text/css">
.box .box-1{
    width: 200px;
    height: 200px;
    text-align: center;
    line-height: 200px;
    font-size: 2em;
    position: absolute;
    top: 0;
    left: 0;
  }
  .box .box-1:nth-child(1){
    /*大立方體第一面*/
    background: rgba(225,0,0,0.5);
    transform:rotateX(90deg) translateZ(100px);

  }.box .box-1:nth-child(2){
         /*大立方體第二面*/
    background: rgba(255,255,0,0.5);
    transform:rotateX(-90deg) translateZ(100px);

  }.box .box-1:nth-child(3){
        /*大立方體第三面*/
    background: rgba(225,0,255,0.5);
    transform:rotateY(-90deg) translateZ(100px);
  }.box .box-1:nth-child(4){
         /*大立方體第四面*/
    background: rgba(0,255,0,0.5);
    transform:rotateY(90deg) translateZ(100px);

  }.box .box-1:nth-child(5){
        /*大立方體第五面*/
    background: rgba(225,0,0,0.5);
      transform:translateZ(100px);
  }.box .box-1:nth-child(6){
        /*大立方體第六面*/
    background: rgba(0,0,255,0.5);
    transform:rotateY(180deg) translateZ(100px);
  }
</style>

【六、效果展示】

1、點擊運行，效果如下圖所示。

2、鼠標移到立方體上，縮放效果展示，如下圖所示。

【七、總結】

1、整個效果寫出來，還是比較簡單的，只要明白各個命令的意思，剩下的就是組織一下邏輯而已。

2、歡迎大家積極嘗試，有時候看到別人實現起來很簡單，但是到自己動手實現的時候，總會有各種各樣的問題，切勿眼高手低，勤動手，才可以理解的更加深刻。

3、CSS樣式的效果不止這些，還有更加炫酷的效果，值得大家去學習。

4、實現的方法3d立方體的方法有很多，但這是最簡單的一種。

5、如果需要本文源碼，請在公眾號后臺回復“立方體”四個字獲取。

看完本文有收獲？請轉發分享給更多的人

IT共享之家

入群請在微信后臺回復【入群】

想學習更多Python網絡爬蟲與數據挖掘知識，可前往專業網站：http://pdcfighting.com/

內容首發于工粽號：程序員大澈，每日分享一段優質代碼片段，歡迎關注和投稿！

大家好，我是大澈！

本文約 500+ 字，整篇閱讀約需 1 分鐘。

今天分享一段優質 CSS 代碼片段，實現了超酷的3D立體文字效果。

老規矩，先閱讀代碼片段并思考，再看代碼解析再思考，最后評論區留下你的見解！

div {
  color: #ffffff;
  font-size: 60px;
  font-weight: 700;
  text-shadow: 
    1px 0px #ff5500, 1px 2px #ff5500, 3px 1px #ffaa00,
    2px 3px #ff5500, 4px 2px #ffaa00, 4px 4px #ff5500,
    5px 3px #ffaa00, 5px 5px #ff5500, 7px 4px #ffaa00,
    6px 6px #ff5500, 8px 5px #ffaa00, 7px 7px #ff5500,
    9px 6px #ffaa00, 9px 8px #ff5500, 11px 7px #ffaa00
}

分享原因

這段代碼展示了如何使用CSS的text-shadow屬性創建復雜的多層次陰影效果，為文本添加立體感和視覺深度。

通過設置多個陰影值，可以實現炫酷的文字效果，非常適合用于標題、橫幅或其他需要吸引注意力的文本元素。

項目中用到時，可直接CV！

代碼解析

1. 基礎文字樣式

color: #ffffff;: 設置文本顏色為白色。

font-size: 60px;: 設置文本字體大小為60像素。

font-weight: 700;: 設置文本粗細為700，即加粗。

2. text-shadow: ...

設置多個文本陰影。

陰影值的格式是：x方向偏移量 y方向偏移量陰影顏色。

每個陰影值定義一個特定位置和顏色的陰影，多個陰影值組合在一起，創造出復雜的、多層次的3D陰影效果

- end -

在線咨詢

上一篇：市面上屏占比最大的幾款手機哪款最適合你？
下一篇：Vim實用技巧：global命令

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商