使用CSS3渐变实现的圆形悬停动画 - 3D翻转

圆形图片悬停时，整体绕X轴向下翻转90度。反面出现标题。

UI，教程

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

第三方库
作品简介 2999
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

HTML

<h1><strong>Circle</strong> Hover Effects</h1>
        <h2>Pretty hover effects on circles with CSS Transitions</h2>

<div class="support-note">
            
            
            <span class="no-csstransforms">CSS transforms are not supported in your browser</span>
            
            <span class="no-csstransitions">CSS transitions are not supported in your browser</span>
            <span class="note-ie">Sorry, only modern browsers.</span>
        </div>

</header>

<section class="main">
			
				<ul class="ch-grid">
					<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="https://drbl.in/eAoj">View on Dribbble</a></p>
								</div>	
							</div>
						</div>
					</li>
					<li>
						<div class="ch-item">
							<div class="ch-info">
								<div class="ch-info-front ch-img-2"></div>
								<div class="ch-info-back">
									<h3>You</h3>
									<p>by Zoe Ingram <a href="https://drbl.in/eCcV">View on Dribbble</a></p>
								</div>
							</div>
						</div>
					</li>
					<li>
						<div class="ch-item">
							<div class="ch-info">
								<div class="ch-info-front ch-img-3"></div>
								<div class="ch-info-back">
									<h3>Love</h3>
									<p>by Eileen Tjan <a href="https://drbl.in/ewTL">View on Dribbble</a></p>
								</div>
							</div>
						</div>
					</li>
				</ul>
				
			</section>

</div>

圆形图片悬停时，整体绕X轴向下翻转90度。反面出现标题。

UI，教程

编辑器支持Emmet

快捷键

圆形图片悬停时，整体绕X轴向下翻转90度。反面出现标题。

UI，教程

使用CSS3和SVG创建提示框 - 带图标圆形气泡

使用jQuery.dropdown.js插件实现超酷的自定义下拉列表框动效 - 扇形排列

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：