【譯】使用CSS Transitions實現圓形懸停效果

時間  2019-11-07
標籤 使用 css transitions 實現 圓形 懸停 效果 欄目 CSS 简体版
原文   原文鏈接

在線預覽 下載源碼css

在今天的教程中，咱們將在圓上試驗懸停效果。 自從有了border- radius屬性，咱們能夠建立圓形形狀，而且它們做爲設計元素更常出如今網站中。 我特別喜歡看到的一個用途是圓形縮略圖，它看起來比一般的矩形更有趣。 由於圓是如此特殊的形狀，咱們將爲它創造一些特殊的懸停效果！瀏覽器

咱們將在本教程中省略瀏覽器前綴。 但你固然會在下載文件中找到它們。bash

那麼，讓咱們開始吧！app

HTML結構

對於大多數示例，咱們將使用如下結構：post

<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樣式

讓咱們爲列表和列表項定義一些常見的樣式：ui

.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;
}
複製代碼

一些示例將具備不一樣的結構，但咱們將更詳細地研究每一個示例。url

示例1

第一個例子是經過縮放來揭示描述，咱們還將爲".ch-item"的內陰影設置動畫。 因此讓咱們定位".ch-item"並設置一個漂亮的，內陰影和過渡：spa

.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的精選圖片插圖。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程