【译】使用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教程