【HTML+CSS】3D卡片，給你不一樣的視覺體驗
實例：3D卡片，給你不一樣的視覺體驗
技術(shù)：HTML+CSS
結(jié)構(gòu)剖析：
基本結(jié)構(gòu)：此插件由三張卡片和兩段文本組成。
顏色代碼：#e0c7e3,#badbe9?#fff
HTML:
首先我們設(shè)置一個相同的類名，因為三個卡片是一樣的，以card為名稱的類名，在card里嵌套兩個單獨的類名before和behind和用以添加文本。
CSS:卡片位置確定
設(shè)置類名body，使用彈性布局，讓頁面元素水平+垂直居中，使用代碼display: flex; justify-content: center; align-items: center; height:100vh; perspective: 1000px;
代碼解釋：perspective: ;定義 3D 元素距視圖的距離，以像素計。該屬性允許您改變 3D 元素查看 3D 元素的視圖。
CSS:設(shè)置卡片樣式
類名:首先在css里設(shè)置出類名 .car
寬度和高度：
使用代碼width: ;height: ;設(shè)置出一個寬度為300px高度為450px的卡片.
圓角：使用圓角代碼margin-right:;設(shè)置像素為50px。
子元素需要絕對定位，父元素需要相對定位，所以在.car里需要加上相對定位position: relative;以便后續(xù)的操作。
HTML:
文本：在car里的兩個類名里文本，為了方便，我選擇的文本是HTML+CSS和求點贊和求收藏，求關(guān)注，求評論設(shè)置p標簽并添加文本。
CSS:文本樣式
前面提到子元素需要絕對定位，所以添加類名.before,.behind后添加絕對定位position:absolute;
接下來，我們就要設(shè)置文本樣式了。
文本居中：
我們首先使用定位代碼和寬高，top：0；left：0；width:100%;
height:100%;這里使用定位代碼和寬高的代碼是使得文本和父元素的寬高相同，接下來就要使用彈性布局，完善文本樣式，首先使用display: flex;?和flex-direction: column;還要加一個背景顏色代碼background-color：；為白色#fff。
背景色:
背景色為漸變色,這里使用代碼，background-image: linear-gradient();顏色代碼為#e0c7e3,#badbe9，這樣我們就得到了一張漸變色的卡片。
圓角：使用圓角代碼margin-right:;設(shè)置像素為50px。
注：flex-direction: column;意為屬性規(guī)定靈活項目的方向。
那么現(xiàn)在子元素垂直陳列，那么就要使用代碼align-items: center;讓子元素水平居中。除了這樣，還要使用代碼justify-content: space-around;平均分配高度給每一個子元素。
文本大?。?/strong>
我們這里使用代碼font-size: ;設(shè)置像素為30px，這樣就可以改變文本的大小。
注：? ? backface-visibility: hidden;隱藏被旋轉(zhuǎn)的 div 元素的背面
? ? ? ? 到了這里，我們的卡片設(shè)置就完成了一半了，接下來我們就要設(shè)置3D效果了。
3D盒子：
設(shè)置類名:behind，使用代碼transform: rotateY(180deg);，因為背面卡片要到后面去，所以我們給背面卡片加一個沿Y軸旋轉(zhuǎn)180度的屬性。
接下來，前往父元素設(shè)置3D效果，使用代碼transform-style: preserve-3d;這個屬性是加到父元素上的，影響到的是子元素，我們還要設(shè)置animation: rotate-reverse 2.2s cubic-bezier(0.66,-0.47,0.33,1.5) forwards;代碼，給卡片設(shè)置一個默認動畫。
定義動畫：3D盒子設(shè)置好了，我們就要設(shè)置旋轉(zhuǎn)動畫，使用以下代碼實現(xiàn)旋轉(zhuǎn)動畫。
然后我們設(shè)置旋轉(zhuǎn)動畫的默認動畫，也就是卡片的旋轉(zhuǎn)時間使用代碼animation: rotate-reverse 2.2s cubic-bezier(0.66,-0.47,0.33,1.5) forwards;設(shè)置完成后就會展示出以下效果，刷新一次，旋轉(zhuǎn)一次。
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 這樣，3D卡片就制作成功了。
HTML:
最后，將html中的div復(fù)制兩次即可，在CSS .card中使用代碼margin-right: ;產(chǎn)生40的間距，這樣三個卡片就會產(chǎn)生距離，就會更美觀了。
成品展示：
HTML:
CSS:
