css3实现卡片翻转

最新推荐文章于 2024-09-02 09:11:40 发布

见面时的呼吸都曾反复练习

最新推荐文章于 2024-09-02 09:11:40 发布

阅读量3.2k

点赞数 1

分类专栏： HTML5+CSS3 文章标签： css3 transform rotateY

本文链接：https://blog.csdn.net/wstpa/article/details/48419987

版权

本文介绍了如何使用CSS3属性实现卡片翻转效果，重点涉及perspective、transform-style、backface-visibility和transform: rotateY()的用法。通过设置这些属性，可以创建具有3D视觉效果的卡片翻转动画。

摘要由CSDN通过智能技术生成

真的是好记性不如乱笔头，以前看过了css3实现卡片翻转，觉得简单，也就没做笔记，今天在写了，一头蒙啊。。
需要用到的css3:属性：
1、perspective:800px;景深：一般设给舞台，
2、transform-style：preserve-3d；3d场景，一般设给容器，也就是那个施加动画的元素
3、backface-visibility:hidden ;是否显示该选择元素旋转到背面后的样子
4、transform：rotateY（0deg）;元素绕Y轴旋转

例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    * {
    margin: 0;padding: 0}
    #wrap {