使用jQuery和CSS3实现超酷的3D圆形卡片/贺卡

3D Flipping Circle with CSS3 and jQuery 点击卡片中间长方形标签的柄部，出现卡片被拉开，3D翻转的动画。很棒的设计创意和代码实现！

模板，教程

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

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

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <link rel="stylesheet" type="text/css" href="https://tympanus.net/Tutorials/3DFlippingCircle/css/demo.css" />
    <link rel="stylesheet" type="text/css" href="https://tympanus.net/Tutorials/3DFlippingCircle/css/style.css" />
    <link href='https://fonts.googleapis.com/css?family=Montserrat|Dancing+Script:700' rel='stylesheet' type='text/css'>
    <script type="text/javascript" src="https://tympanus.net/Tutorials/3DFlippingCircle/js/modernizr.custom.79639.js"></script>
    
    
</head>

<h1>3D Flipping Circle <span>with CSS3 &amp; jQuery</span></h1>
            <h2>Open the paper circle by clicking the right handle or swiping the circle.</h2>

<div class="support-note">
                
                
                <span class="no-csstransforms">CSS transforms are not supported in your browser</span>
                <span class="no-csstransforms3d">CSS 3D 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>

<div class="fc-handle fc-handle-pull"></div>

<div class="fc-overlay fc-overlay-reverse"></div>

<div class="fc-handle fc-handle-out">
                        <div></div>
                    </div>

<div class="fc-bottom">
                        <div class="fc-bottom-bg">
                            <div class="fc-content">
                                <p>I can live with doubt, and uncertainty, and not knowing. I think it's much more interesting to live not knowing than to have answers which might be wrong. <span>Richard Feynman</span>
                                </p>
                            </div>
                        </div>
                        <div class="fc-overlay fc-overlay-solid"></div>
                    </div>

<div class="fc-flip">

<div class="fc-content">
                                    <h3><span>♞</span>Free revelations</h3>
                                    <p>by Codrops</p>
                                </div>

</div>

</div>

<div class="fc-content">
                                    <div class="feynman">
                                        <span>1918 &ndash; 1988</span>
                                    </div>
                                </div>

</div>

</div>

</div>

</div>

</div>

</section>

</div>
    <script type="text/javascript" src="/uploads/160101/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="https://tympanus.net/Tutorials/3DFlippingCircle/js/hammer.js"></script>
    <script type="text/javascript" src="https://tympanus.net/Tutorials/3DFlippingCircle/js/jquery.hammer.js"></script>
    <script type="text/javascript">
        $(function() {

var $wrapper = $('#fc-wrapper'),
                $handle = $wrapper.children('div.fc-handle-pull');

$handle.on('click', function(event) {

($handle.data('opened')) ? close(): open();

});

$wrapper.hammer().bind('dragend', function(event) {
                switch (event.direction) {
                    case 'right':
                        open();
                        break;
                    case 'left':
                        close();
                        break;
                }
            });

function open() {
                $wrapper.addClass('fc-wrapper-open');
                $handle.data('opened', true);
            }

function close() {
                $wrapper.removeClass('fc-wrapper-open');
                $handle.data('opened', false);
            }

});
    </script>
</body>

</html>

3D Flipping Circle with CSS3 and jQuery 点击卡片中间长方形标签的柄部，出现卡片被拉开，3D翻转的动画。很棒的设计创意和代码实现！

模板，教程

编辑器支持Emmet

快捷键

3D Flipping Circle with CSS3 and jQuery 点击卡片中间长方形标签的柄部，出现卡片被拉开，3D翻转的动画。 很棒的设计创意和代码实现！

模板，教程

使用jQuery和CSS3实现的全屏切分滑块/图片轮播

使用CSS3 transforms和jQuery实现图片悬停时的3D折叠动效

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：

3D Flipping Circle with CSS3 and jQuery 点击卡片中间长方形标签的柄部，出现卡片被拉开，3D翻转的动画。很棒的设计创意和代码实现！