在今天的教程中，我們將在圓上試驗懸停效果。 自從有了border- radius屬性，我們可以建立圓形形狀，並且它們作為設計元素更常出現在網站中。 我特別喜歡看到的一個用途是圓形縮圖，它看起來比通常的矩形更有趣。 因為圓是如此特殊的形狀，我們將為它創造一些特殊的懸停效果！
我們將在本教程中省略瀏覽器字首。 但你當然會在下載檔案中找到它們。
那麼，讓我們開始吧！
HTML結構
對於大多數示例，我們將使用以下結構：
<ul class="ch-grid">
<li>
<div class="ch-item ch-img-1">
<div class="ch-info">
<h3>Use what you have</h3>
<p>by Angela Duncan <a href="http://drbl.in/eOPF">View on Dribbble</a></p>
</div>
</div>
</li>
<li>
<div class="ch-item ch-img-2">
<div class="ch-info">
<h3>Common Causes of Stains</h3>
<p>by Antonio F. Mondragon <a href="http://drbl.in/eKMi">View on Dribbble</a></p>
</div>
</div>
</li>
<li>
<div class="ch-item ch-img-3">
<div class="ch-info">
<h3>Pink Lightning</h3>
<p>by Charlie Wagers <a href="http://drbl.in/ekhp">View on Dribbble</a></p>
</div>
</div>
</li>
</ul>
複製程式碼雖然我們可以在這裡使用影象，但我們會通過使用背景影象來給自己更多的選擇。 我們將在以“ch-img-”開頭的類中定義它們。
現在，讓我們做一些懸停效果吧！
CSS樣式
讓我們為列表和列表項定義一些常見的樣式：
.ch-grid {
margin: 20px 0 0 0;
padding: 0;
list-style: none;
display: block;
text-align: center;
width: 100%;
}
.ch-grid:after,
.ch-item:before {
content: '';
display: table;
}
.ch-grid:after {
clear: both;
}
.ch-grid li {
width: 220px;
height: 220px;
display: inline-block;
margin: 20px;
}
複製程式碼一些示例將具有不同的結構，但我們將更詳細地研究每個示例。
示例1
第一個例子是通過縮放來揭示描述，我們還將為".ch-item"的內陰影設定動畫。 所以讓我們定位".ch-item"並設定一個漂亮的，內陰影和過渡：
.ch-item {
width: 100%;
height: 100%;
border-radius: 50%;
overflow: hidden;
position: relative;
cursor: default;
box-shadow:
inset 0 0 0 16px rgba(255,255,255,0.6),
0 1px 2px rgba(0,0,0,0.1);
transition: all 0.4s ease-in-out;
}
複製程式碼正如您之前注意到的那樣，我們已經為列表項提供了兩個類：一個是ch-item，另一個用於定義特定的背景影象：
.ch-img-1 {
background-image: url(../images/1.jpg);
}
.ch-img-2 {
background-image: url(../images/2.jpg);
}
.ch-img-3 {
background-image: url(../images/3.jpg);
}
複製程式碼".ch-info"將設定為絕對定位，我們將通過設定RGBA值為其提供半透明背景。 它的不透明度將設定為0，我們也將它縮小到0：
.ch-info {
position: absolute;
background: rgba(63,147,147, 0.8);
width: inherit;
height: inherit;
border-radius: 50%;
overflow: hidden;
opacity: 0;
transition: all 0.4s ease-in-out;
transform: scale(0);
}
複製程式碼標題將具有一些padding和margin以及平滑的文字陰影：
.ch-info h3 {
color: #fff;
text-transform: uppercase;
letter-spacing: 2px;
font-size: 22px;
margin: 0 30px;
padding: 45px 0 0 0;
height: 140px;
font-family: 'Open Sans', Arial, sans-serif;
text-shadow:
0 0 1px #fff,
0 1px 2px rgba(0,0,0,0.3);
}
複製程式碼p元素的不透明度為0和一個過渡（我們希望在懸停時將其淡入但有延遲時間）：
.ch-info p {
color: #fff;
padding: 10px 5px;
font-style: italic;
margin: 0 30px;
font-size: 12px;
border-top: 1px solid rgba(255,255,255,0.5);
opacity: 0;
transition: all 1s ease-in-out 0.4s;
}
複製程式碼連結將使用大寫字母，我們將懸停顏色設定為黃色：
.ch-info p a {
display: block;
color: rgba(255,255,255,0.7);
font-style: normal;
font-weight: 700;
text-transform: uppercase;
font-size: 9px;
letter-spacing: 1px;
padding-top: 4px;
font-family: 'Open Sans', Arial, sans-serif;
}
.ch-info p a:hover {
color: rgba(255,242,34, 0.8);
}
複製程式碼現在，有趣的懸停動作！ ".ch-item"的內陰影的尺寸從16px設定為1px：
.ch-item:hover {
box-shadow:
inset 0 0 0 1px rgba(255,255,255,0.1),
0 1px 2px rgba(0,0,0,0.1);
}
複製程式碼".ch-info"將淡入並縮放到1：
.ch-item:hover .ch-info {
transform: scale(1);
opacity: 1;
}
複製程式碼描述的段落p將會淡入（延遲）：
.ch-item:hover .ch-info p {
opacity: 1;
}
複製程式碼這是第一個例子！ 我們來看看下一個。
示例2
此示例中的HTML結構與第一個中的HTML結構相同。
在這個例子中，我們將使用".ch-item"的陰影來填充我們的圓並作為描述的背景。 所以，這裡沒什麼特別的，只是多了一個陰影值：
.ch-item {
width: 100%;
height: 100%;
border-radius: 50%;
position: relative;
cursor: default;
box-shadow:
inset 0 0 0 0 rgba(200,95,66, 0.4),
inset 0 0 0 16px rgba(255,255,255,0.6),
0 1px 2px rgba(0,0,0,0.1);
transition: all 0.4s ease-in-out;
}
複製程式碼背景影象：
.ch-img-1 {
background-image: url(../images/4.jpg);
}
.ch-img-2 {
background-image: url(../images/5.jpg);
}
.ch-img-3 {
background-image: url(../images/6.jpg);
}
複製程式碼".ch-info"將再次縮放：
.ch-info {
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
overflow: hidden;
opacity: 0;
transition: all 0.4s ease-in-out;
transform: scale(0);
backface-visibility: hidden;
}
複製程式碼讓我們設計文字元素的風格：
.ch-info h3 {
color: #fff;
text-transform: uppercase;
position: relative;
letter-spacing: 2px;
font-size: 22px;
margin: 0 30px;
padding: 65px 0 0 0;
height: 110px;
font-family: 'Open Sans', Arial, sans-serif;
text-shadow:
0 0 1px #fff,
0 1px 2px rgba(0,0,0,0.3);
}
.ch-info p {
color: #fff;
padding: 10px 5px;
font-style: italic;
margin: 0 30px;
font-size: 12px;
border-top: 1px solid rgba(255,255,255,0.5);
}
.ch-info p a {
display: block;
color: rgba(255,255,255,0.7);
font-style: normal;
font-weight: 700;
text-transform: uppercase;
font-size: 9px;
letter-spacing: 1px;
padding-top: 4px;
font-family: 'Open Sans', Arial, sans-serif;
}
.ch-info p a:hover {
color: rgba(255,242,34, 0.8);
}
複製程式碼在懸停時，我們會將內陰影（偏紅的陰影）設定為110px展開半徑。 這將涵蓋所有的圓：
.ch-item:hover {
box-shadow:
inset 0 0 0 110px rgba(200,95,66, 0.4),
inset 0 0 0 16px rgba(255,255,255,0.8),
0 1px 2px rgba(0,0,0,0.1);
}
複製程式碼我們將縮放".ch-info"並淡化它：
.ch-item:hover .ch-info {
opacity: 1;
transform: scale(1);
}
複製程式碼示例3
在這個例子中，我們將使用旋轉。 結構將與前兩個示例略有不同，因為我們需要將".ch-thumb"新增為第二個分割槽。 所以列表項看起來如下：
<li>
<div class="ch-item">
<div class="ch-info">
<h3>Music poster</h3>
<p>by Jonathan Quintin <a href="http://drbl.in/eGjw">View on Dribbble</a></p>
</div>
<div class="ch-thumb ch-img-1"></div>
</div>
</li>
複製程式碼".ch-item"的樣式將與之前一樣（帶有微妙的陰影）：
.ch-item {
width: 100%;
height: 100%;
border-radius: 50%;
position: relative;
cursor: default;
box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
複製程式碼".ch-thumb"元素將具有特定的變換原點（位於右中間的某個位置）和過渡。 這將是我們想要在懸停時向下旋轉的元素，以便它顯示".ch-info"元素：
.ch-thumb {
width: 100%;
height: 100%;
border-radius: 50%;
overflow: hidden;
position: absolute;
box-shadow: inset 0 0 0 15px rgba(255,255,255, 0.5);
transform-origin: 95% 40%;
transition: all 0.3s ease-in-out;
}
複製程式碼使用偽類：建立一個帶有徑向漸變的小黃銅緊韌體：
.ch-thumb:after {
content: '';
width: 8px;
height: 8px;
position: absolute;
border-radius: 50%;
top: 40%;
left: 95%;
margin: -4px 0 0 -4px;
background: radial-gradient(ellipse at center, rgba(14,14,14,1) 0%,rgba(125,126,125,1) 100%);
box-shadow: 0 0 1px rgba(255,255,255,0.9);
}
複製程式碼讓我們為每個".ch-thumb"元素定義背景影象：
.ch-img-1 {
background-image: url(../images/7.jpg);
z-index: 12;
}
.ch-img-2 {
background-image: url(../images/8.jpg);
z-index: 11;
}
.ch-img-3 {
background-image: url(../images/9.jpg);
z-index: 10;
}
複製程式碼".ch-info"元素的樣式如下：
.ch-info {
position: absolute;
width: inherit;
height: inherit;
border-radius: 50%;
overflow: hidden;
background: #c9512e url(../images/noise.png);
box-shadow: inset 0 0 0 5px rgba(0,0,0,0.05);
}
複製程式碼文字元素將按以下方式定位和設定樣式：
.ch-info h3 {
color: #fff;
text-transform: uppercase;
position: relative;
letter-spacing: 2px;
font-size: 18px;
margin: 0 60px;
padding: 22px 0 0 0;
height: 85px;
font-family: 'Open Sans', Arial, sans-serif;
text-shadow:
0 0 1px #fff,
0 1px 2px rgba(0,0,0,0.3);
}
.ch-info p {
color: #fff;
padding: 10px 5px;
font-style: italic;
margin: 0 30px;
font-size: 12px;
border-top: 1px solid rgba(255,255,255,0.5);
}
複製程式碼連結將是一個小圓圈，應該在懸停時從右側移入：
.ch-info p a {
display: block;
color: #333;
width: 80px;
height: 80px;
background: rgba(255,255,255,0.3);
border-radius: 50%;
color: #fff;
font-style: normal;
font-weight: 700;
text-transform: uppercase;
font-size: 9px;
letter-spacing: 1px;
padding-top: 24px;
margin: 7px auto 0;
font-family: 'Open Sans', Arial, sans-serif;
opacity: 0;
transition:
transform 0.3s ease-in-out 0.2s,
opacity 0.3s ease-in-out 0.2s,
background 0.2s linear 0s;
transform: translateX(60px) rotate(90deg);
}
.ch-info p a:hover {
background: rgba(255,255,255,0.5);
}
複製程式碼由於我們希望移動和不透明度發生延遲，但背景懸停沒有過渡，我們將分離過渡。
在懸停時，我們將旋轉".ch-thumb"並移動/旋轉連結元素：
.ch-item:hover .ch-thumb {
box-shadow: inset 0 0 0 15px rgba(255,255,255, 0.5), 0 1px 3px rgba(0,0,0,0.2);
transform: rotate(-110deg);
}
.ch-item:hover .ch-info p a{
opacity: 1;
transform: translateX(0px) rotate(0deg);
}
複製程式碼示例4
第四個例子將涉及一些3D旋轉。 因此，我們需要調整結構，以便有一個容器用於透視和前面和後面。 因此，列表項將如下所示：
<li>
<div class="ch-item ch-img-1">
<div class="ch-info-wrap">
<div class="ch-info">
<div class="ch-info-front ch-img-1"></div>
<div class="ch-info-back">
<h3>Bears Type</h3>
<p>by Josh Schott <a href="http://drbl.in/ewUW">View on Dribbble</a></p>
</div>
</div>
</div>
</div>
</li>
複製程式碼如您所見，我們將背景影象新增到".ch-item"以及".ch-info-front"。 訣竅是給".ch-info-wrap"提供相同的背景。
這將產生幻覺，好像我們的".ch-item"有一個洞。
".ch-item"將具有以下的樣式：
.ch-item {
width: 100%;
height: 100%;
border-radius: 50%;
position: relative;
box-shadow: 0 1px 2px rgba(0,0,0,0.1);
cursor: default;
}
複製程式碼".ch-info-wrap"將有透視屬性，我們還將新增陰影的過渡：
.ch-info-wrap{
position: absolute;
width: 180px;
height: 180px;
border-radius: 50%;
perspective: 800px;
transition: all 0.4s ease-in-out;
top: 20px;
left: 20px;
background: #f9f9f9 url(../images/bg.jpg);
box-shadow:
0 0 0 20px rgba(255,255,255,0.2),
inset 0 0 3px rgba(115,114, 23, 0.8);
}
複製程式碼".ch-info"將需要preserve-3d值用於變換樣式，我們將給它一個過渡，因為這是我們將在3d中旋轉的元素：
.ch-info{
position: absolute;
width: 180px;
height: 180px;
border-radius: 50%;
transition: all 0.4s ease-in-out;
transform-style: preserve-3d;
}
複製程式碼正面和背面將具有以下常見樣式：
.ch-info > div {
display: block;
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
background-position: center center;
backface-visibility: hidden;
}
複製程式碼背面將旋轉，以便我們開始不會看到它：
.ch-info .ch-info-back {
transform: rotate3d(0,1,0,180deg);
background: #000;
}
複製程式碼再次，背景圖片：
.ch-img-1 {
background-image: url(../images/10.jpg);
}
.ch-img-2 {
background-image: url(../images/11.jpg);
}
.ch-img-3 {
background-image: url(../images/12.jpg);
}
複製程式碼...和文字元素：
.ch-info h3 {
color: #fff;
text-transform: uppercase;
letter-spacing: 2px;
font-size: 14px;
margin: 0 15px;
padding: 40px 0 0 0;
height: 90px;
font-family: 'Open Sans', Arial, sans-serif;
text-shadow:
0 0 1px #fff,
0 1px 2px rgba(0,0,0,0.3);
}
.ch-info p {
color: #fff;
padding: 10px 5px;
font-style: italic;
margin: 0 30px;
font-size: 12px;
border-top: 1px solid rgba(255,255,255,0.5);
}
.ch-info p a {
display: block;
color: rgba(255,255,255,0.7);
font-style: normal;
font-weight: 700;
text-transform: uppercase;
font-size: 9px;
letter-spacing: 1px;
padding-top: 4px;
font-family: 'Open Sans', Arial, sans-serif;
}
.ch-info p a:hover {
color: rgba(255,242,34, 0.8);
}
複製程式碼在懸停時，我們將更改".ch-info-wrap"的陰影並旋轉".ch-info"，以便我們看到背面：
.ch-item:hover .ch-info-wrap {
box-shadow:
0 0 0 0 rgba(255,255,255,0.8),
inset 0 0 3px rgba(115,114, 23, 0.8);
}
.ch-item:hover .ch-info {
transform: rotate3d(0,1,0,-180deg);
}
複製程式碼示例5
在此示例中，我們希望將".ch-thumb"縮小為0，並通過將其淡入並將其縮小為1來顯示".ch-info"。 第五示例的結構與前一示例中的相同。
該".ch-item"具有以下的風格：
.ch-item {
width: 100%;
height: 100%;
border-radius: 50%;
position: relative;
box-shadow: 0 1px 2px rgba(0,0,0,0.1);
cursor: default;
}
複製程式碼".ch-info-wrap"和".ch-info"將具有以下常見樣式：
.ch-info-wrap,
.ch-info{
position: absolute;
width: 180px;
height: 180px;
border-radius: 50%;
}
複製程式碼讓我們通過將相同的背景設定給".ch-info-wrap"來再次執行“漏洞”技巧：
.ch-info-wrap {
top: 20px;
left: 20px;
background: #f9f9f9 url(../images/bg.jpg);
box-shadow:
0 0 0 20px rgba(255,255,255,0.2),
inset 0 0 3px rgba(115,114, 23, 0.8);
}
複製程式碼常見的樣式是“前面”和“背面”（它不再是正面和背面）：
.ch-info > div {
display: block;
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
background-position: center center;
}
複製程式碼“前面”將有一個過渡（它會縮小並消失）：
.ch-info .ch-info-front {
transition: all 0.6s ease-in-out;
}
複製程式碼".ch-info-back"最初將具有0不透明度並且可以擴充套件到1.5：
.ch-info .ch-info-back {
opacity: 0;
background: #223e87;
pointer-events: none;
transform: scale(1.5);
transition: all 0.4s ease-in-out 0.2s;
}
複製程式碼我們需要將pointer-events設定為none，因為我們不希望元素“阻塞”其他所有內容...記住，它被放大，我們因為它的不透明性而無法看到它，但它仍然存在。
像往常一樣的背景影象和文字元素，只是有一些不同的顏色：
.ch-img-1 {
background-image: url(../images/13.jpg);
}
.ch-img-2 {
background-image: url(../images/14.jpg);
}
.ch-img-3 {
background-image: url(../images/15.jpg);
}
.ch-info h3 {
color: #fff;
text-transform: uppercase;
letter-spacing: 2px;
font-size: 18px;
margin: 0 15px;
padding: 40px 0 0 0;
height: 80px;
font-family: 'Open Sans', Arial, sans-serif;
text-shadow:
0 0 1px #fff,
0 1px 2px rgba(0,0,0,0.3);
}
.ch-info p {
color: #fff;
padding: 10px 5px 0;
font-style: italic;
margin: 0 30px;
font-size: 12px;
border-top: 1px solid rgba(255,255,255,0.5);
}
.ch-info p a {
display: block;
color: #e7615e;
font-style: normal;
font-weight: 700;
text-transform: uppercase;
font-size: 9px;
letter-spacing: 1px;
padding-top: 4px;
font-family: 'Open Sans', Arial, sans-serif;
}
.ch-info p a:hover {
color: #fff;
}
複製程式碼在懸停時，我們將縮小".ch-info-front"部分為0並將不透明度設定為0.這將使其消失在後面。
.ch-item:hover .ch-info-front {
transform: scale(0);
opacity: 0;
}
複製程式碼".ch-info-back"將縮小為1並淡入。我們還將pointer event事件設定為auto，因為現在我們希望能夠單擊連結：
.ch-item:hover .ch-info-back {
transform: scale(1);
opacity: 1;
pointer-events: auto;
}
複製程式碼示例6
在此示例中，我們希望向下翻轉內部".ch-thumb"部分以顯示描述。 HTML將與前兩個示例中的相同。
".ch-item"將按以前的樣式設定：
.ch-item {
width: 100%;
height: 100%;
border-radius: 50%;
position: relative;
box-shadow: 0 1px 2px rgba(0,0,0,0.1);
cursor: default;
}
複製程式碼The common style of the wrapper and the description element:
".ch-info-wrap", ".ch-info"元素的通用樣式：
.ch-info-wrap,
.ch-info{
position: absolute;
width: 180px;
height: 180px;
border-radius: 50%;
transition: all 0.4s ease-in-out;
}
複製程式碼".ch-info-wrap"將具有透視：
.ch-info-wrap {
top: 20px;
left: 20px;
background: #f9f9f9 url(../images/bg.jpg);
box-shadow:
0 0 0 20px rgba(255,255,255,0.2),
inset 0 0 3px rgba(115,114, 23, 0.8);
perspective: 800px;
}
複製程式碼".ch-info"元素需要以下轉換樣式：
.ch-info {
transform-style: preserve-3d;
}
複製程式碼正面和背面將有一個過渡。 請注意，這次我們不會將backface-visibility設定為hidden，因為我們希望".ch-thumb"的背面在我們向下翻轉時顯示：
.ch-info > div {
display: block;
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
background-position: center center;
transition: all 0.6s ease-in-out;
}
複製程式碼讓我們設定正確的transform-origin，以便我們可以開啟它：
.ch-info .ch-info-front {
transform-origin: 50% 100%;
z-index: 100;
box-shadow:
inset 2px 1px 4px rgba(0,0,0,0.1);
}
複製程式碼我們將為".ch-info-back"設定一個0不透明度的RGBA值：
.ch-info .ch-info-back {
background: rgba(230,132,107,0);
}
複製程式碼和其他元素的通常風格：
.ch-img-1 {
background-image: url(../images/16.jpg);
}
.ch-img-2 {
background-image: url(../images/17.jpg);
}
.ch-img-3 {
background-image: url(../images/18.jpg);
}
.ch-info h3 {
color: #fff;
text-transform: uppercase;
letter-spacing: 2px;
font-size: 14px;
margin: 0 25px;
padding: 40px 0 0 0;
height: 90px;
font-family: 'Open Sans', Arial, sans-serif;
text-shadow:
0 0 1px #fff,
0 1px 2px rgba(0,0,0,0.3);
}
.ch-info p {
color: #fff;
padding: 10px 5px;
font-style: italic;
margin: 0 30px;
font-size: 12px;
border-top: 1px solid rgba(255,255,255,0.5);
}
.ch-info p a {
display: block;
color: rgba(255,255,255,0.7);
font-style: normal;
font-weight: 700;
text-transform: uppercase;
font-size: 9px;
letter-spacing: 1px;
padding-top: 4px;
font-family: 'Open Sans', Arial, sans-serif;
}
.ch-info p a:hover {
color: rgba(255,242,34, 0.8);
}
複製程式碼在懸停時，我們將旋轉前部並略微為陰影設定動畫。 後部將以其背景顏色淡化：
.ch-item:hover .ch-info-front {
transform: rotate3d(1,0,0,-180deg);
box-shadow:
inset 0 0 5px rgba(255,255,255,0.2),
inset 0 0 3px rgba(0,0,0,0.3);
}
.ch-item:hover .ch-info-back {
background: rgba(230,132,107,0.6);
}
複製程式碼示例7
最後一個示例將像旋轉立方體一樣，我們通過從頂部向後旋轉它來顯示描述。 由於我們將旋轉每個面，因此我們不需要額外的父級元素。 因此，我們的HTML將如下所示：
<li>
<div class="ch-item">
<div class="ch-info">
<div class="ch-info-front ch-img-1"></div>
<div class="ch-info-back">
<h3>Mouse</h3>
<p>by Alexander Shumihin <a href="http://drbl.in/eAoj">View on Dribbble</a></p>
</div>
</div>
</div>
</li>
複製程式碼我們將為".ch-item"提供透視值：
.ch-item {
width: 100%;
height: 100%;
border-radius: 50%;
position: relative;
cursor: default;
perspective: 900px;
}
複製程式碼".ch-info"將需要preserve-3d值：
.ch-info{
position: absolute;
width: 100%;
height: 100%;
transform-style: preserve-3d;
}
複製程式碼正面和背面將具有過渡，變換原點將設定為50％0％：
.ch-info > div {
display: block;
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
background-position: center center;
transition: all 0.4s linear;
transform-origin: 50% 0%;
}
複製程式碼讓我們為前面部分設定一個漂亮的內陰影：
.ch-info .ch-info-front {
box-shadow: inset 0 0 0 16px rgba(0,0,0,0.3);
}
複製程式碼背面將在最初旋轉，以顯示為立方體的下表面：
.ch-info .ch-info-back {
transform: translate3d(0,0,-220px) rotate3d(1,0,0,90deg);
background: #000;
opacity: 0;
}
複製程式碼背景影象和文字元素的通常風格：
.ch-img-1 {
background-image: url(../images/19.jpg);
}
.ch-img-2 {
background-image: url(../images/20.jpg);
}
.ch-img-3 {
background-image: url(../images/21.jpg);
}
.ch-info h3 {
color: #fff;
text-transform: uppercase;
letter-spacing: 2px;
font-size: 24px;
margin: 0 15px;
padding: 60px 0 0 0;
height: 110px;
font-family: 'Open Sans', Arial, sans-serif;
text-shadow:
0 0 1px #fff,
0 1px 2px rgba(0,0,0,0.3);
}
.ch-info p {
color: #fff;
padding: 10px 5px;
font-style: italic;
margin: 0 30px;
font-size: 12px;
border-top: 1px solid rgba(255,255,255,0.5);
}
.ch-info p a {
display: block;
color: rgba(255,255,255,0.7);
font-style: normal;
font-weight: 700;
text-transform: uppercase;
font-size: 9px;
letter-spacing: 1px;
padding-top: 4px;
font-family: 'Open Sans', Arial, sans-serif;
}
.ch-info p a:hover {
color: rgba(255,242,34, 0.8);
}
複製程式碼我們將使用translate3d在3d空間的Y軸上移動前部，並使用rotate3d實際旋轉它。 我們也會淡出它，因為我們之後不希望看到它的任何部分：
.ch-item:hover .ch-info-front {
transform: translate3d(0,280px,0) rotate3d(1,0,0,-90deg);
opacity: 0;
}
複製程式碼背面將“向後”旋轉到0度（記住，最初它向下旋轉）：
.ch-item:hover .ch-info-back {
transform: rotate3d(1,0,0,0deg);
opacity: 1;
}
複製程式碼就是這樣！ 一大堆懸停效果，允許許多不同的變化，快去嘗試一下吧！
希望你喜歡這些效果！
致謝：來自Arnel Baluyot的Stay Foxy的精選圖片插圖。