CSS3 卡片正反面翻转动画（Preserve-3D）

Card Flip with css preserve-3d attribute

CSS3, card

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

HTML

<div>
    <h3>CSS3 卡片正反面翻转动画（Preserve-3D），请点击翻转卡片</h3>
</div>

<div class="container">
    <div class="card" onclick="flip(event)">
        <div class="front">
            <h1>This is the front</h1>
            <p> Here is some additional text</p>
        </div>
        <div class="back">
            <h1>This is the back</h1>
        </div>
    </div>
</div>

Card Flip with css preserve-3d attribute

CSS3, card

编辑器支持Emmet

快捷键

Card Flip with css preserve-3d attribute

CSS3, card

使用CSS3 perspective变换实现的电影卡片悬停3D偏转动效

使用CSS3 PerspectiveTransform实现的逼真3D地球自转动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：