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

圆形图片悬停时，中间区域的圆形盖子绕着X轴向下翻转，反面出现标题。

UI，教程

《three.js使用多个渐变torus模拟光环光晕》申请公开！

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

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>

<ul class="ch-grid">
            <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="#">View on Dribbble</a>
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </li>
            <li>
                <div class="ch-item ch-img-2">
                    <div class="ch-info-wrap">
                        <div class="ch-info">
                            <div class="ch-info-front ch-img-2"></div>
                            <div class="ch-info-back">
                                <h3>Salon Spaces illustrations</h3>
                                <p>by Jeremy Slagle <a href="#">View on Dribbble</a>
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </li>
            <li>
                <div class="ch-item ch-img-3">
                    <div class="ch-info-wrap">
                        <div class="ch-info">
                            <div class="ch-info-front ch-img-3"></div>
                            <div class="ch-info-back">
                                <h3>Leadership Series #3</h3>
                                <p>by Dustin Leer <a href="#">View on Dribbble</a>
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </li>
        </ul>

</section>

</div>

圆形图片悬停时，中间区域的圆形盖子绕着X轴向下翻转，反面出现标题。

UI，教程

编辑器支持Emmet

快捷键

圆形图片悬停时，中间区域的圆形盖子绕着X轴向下翻转，反面出现标题。

UI，教程

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

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

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：