css实现照片翻牌特效

于 2024-07-26 21:35:19 发布
阅读量175 收藏
点赞数 1
文章标签： css3 css html5 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2301_77451464/article/details/140725304
版权

 

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body {
            perspective: 400px;
        }

        .box {
            position: relative;
            width: 300px;
            height: 300px;
            margin: 100px auto;
            transition: all .4s;
            /* 让背面的紫色盒子保留立体空间 给父级添加的 */
            transform-style: preserve-3d;
        }

        .box:hover {
            transform: rotateY(180deg);
        }

        .front,
        .back {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border-radius: 50%;
            font-size: 30px;
            color: #fff;
            text-align: center;
            line-height: 300px;
            backface-visibility: hidden;
            /* 隐藏背面 */


        }

        .front {
            background-color: pink;
            z-index: 1;
        }

        .back {
            background-color: purple;
            /* 像手机一样 背靠背 旋转 */
            transform: rotateY(180deg);
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="front">程序员</div>
        <div class="back">背面</div>
    </div>
</body>

</html>

Fly_hao.belief
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
html5css3项目6：3D的项目有两面翻转的盒子、3D导航栏、旋转木马
小黄呀呀呀的博客
05-18 849
1、两面翻转的盒子 思路： 先设置一个父盒子，然后添加两个子盒子，这两个子盒子都要设置为定位，因为这样这两个才能重叠起来，如果想要实现翻转的效果，需要实现将一个盒子旋转180度，不过这样是不够的，因为父盒子默认孩子盒子是关闭3d效果的，只要父亲一转，孩子就恢复原样，所以解决方法是在父盒子里设置transform-style，然后最后给父亲盒子旋转，即可。不过要给父盒子添加过渡的效果。 <!DOCTYPE html> <html lang="en"> <head>
纯css3实现图片翻牌特效
09-25
在本文中，我们将探讨如何使用纯CSS3实现一个引人注目的图片翻牌特效。这个效果允许用户鼠标悬停在图片上时，图片会像真实的卡片一样翻转，展示其背面的内容。这个炫酷的视觉效果可以用于各种应用场景，如产品展示、...
css 两面翻转
qq_45178972的博客
01-11 671
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>两面翻转</title> <style> div{ width: 200px; hei
css3D旋转 平移 缩放
QQQqq031110的博客
02-25 223
a 指的是一个旋转角度值，如果为正值，元素围绕 Z 轴顺时针旋转；a 指的是一个旋转角度值，如果为正值，元素围绕X轴顺时针旋转；a 指的是一个旋转角度值，如果为正值，元素围绕Y轴顺时针旋转；angle：一个角度值，指定在 3D 空间旋转角度，正值顺时针旋转，反之元素逆时。x：是一个 0 到１之间的数值，主要用来描述元素围绕 X 轴旋转的矢量值。y：是一个 0 到１之间的数值，主要用来描述元素围绕 Y 轴旋转的矢量值。z：是一个 0 到１之间的数值，主要用来描述元素围绕 Z 轴旋转的矢量值。
【CSS3】CSS3 3D 转换 ③ ( 3D 透视视图 | translateZ 转换分析 | 网页调试工具调试 translateZ 属性值 | 代码示例 )
最新发布
让 学习 成为一种 习惯 ( 韩曙亮 の 技术博客 )
08-12 1570
一、translateZ 转换分析 1、translateZ 转换对应的空间分析 2、网页调试工具调试 translateZ 属性值 二、代码示例 - translateZ 转换分析 1、代码示例 - translateZ 为 0 的参照示例 2、代码示例 - translateZ 为 200 示例
CSS3之两面翻转的盒子案例
小杨的博客
07-21 1186
两个小盒子要加定位，其中前面的盒子加上z-index:1;这样就会覆盖后面的盒子. 然后让后面的小盒子y轴旋转180deg，这样当让大盒子旋转180deg的时候后面的小盒子可以出现.原理是使用css3中的3D旋转属性，需要一个父盒子和两个子盒子，将第一个子盒子作为正面，第二个子盒子作为反面，所以先把第二个子盒子沿y轴旋转180度。然后设置父盒子 …原理是使用css3中的3D旋转属性，需要一个父盒子和两个子盒子，将第一个子盒子作为正面，第二个子盒子作为反面，所以先把第二个子盒子沿y轴旋转180度。然后设置父盒
CSS3实现动态翻牌效果 仿百度贴吧3D翻牌一次动画特效
10-22
本文主要分享一个利用CSS3新特性transform，实现3D翻牌的特效，有需要的小伙伴可以参考下。
jquery实现图片翻牌旋转特效特效代码
03-20
**jQuery实现图片翻牌旋转特效详解** 在网页设计中，动态效果可以提升用户体验，增加页面的趣味性。本文将深入探讨如何使用jQuery库来实现图片翻牌旋转特效，这种特效通常用于展示产品信息或者卡片式设计，当用户将...
简单实用的jQuery和CSS3卡片自动翻牌特效
12-13
在本文中，我们将深入探讨如何使用jQuery和CSS3创建一款简单的卡片自动翻牌特效。这个特效为用户提供了吸引人的互动体验，广泛应用于各种网站和应用中，如展示产品信息、游戏元素或者动态显示数据。 首先，我们要...
【CSS3】CSS3 3D 转换 ② ( 3D 透视视图 | “ 透视 “ 概念简介 | 视距与成像关系 | CSS3 中 “ 透视 “ 属性设置 | “ 透视 “ 语法设置 | 代码示例 )
让 学习 成为一种 习惯 ( 韩曙亮 の 技术博客 )
08-11 5593
一、" 透视 " 概念简介 1、" 透视 " 概念引入 2、视距与成像关系 二、CSS3 中 " 透视 " 属性设置 1、" 透视 " 语法设置 2、代码示例 - " 透视 " 语法设置 添加了透视后的代码示例 执行结果
CSS3过渡、过渡练习——进度条案例、2D转换(translate、rotate、scale、转换中心点transform-origin)、动画、3D、案例（两面翻转的盒子、3D导航栏、旋转木马案例）
weixin_70320000的博客
02-16 1759
CSS3过渡、过渡练习——进度条案例、2D转换(translate、rotate、scale、转换中心点transform-origin)、动画、3D、案例（两面翻转的盒子、3D导航栏、旋转木马案例）
CSS实现元素翻转效果
qq_44849271的博客
02-04 4690
翻转效果建议IOS系统、安卓系统、window系统都要进行实机测试，免得线上环境出现兼容问题。1、定义一个父元素，父元素中两个子元素，两个子元素分别是背面与正面，2、定义一个父元素，父元素中两个子元素，两个子元素分别是背面与正面，元素翻转的效果能让用户有良好的体验感。CSS实现元素翻转的效果有两种思路。
css实现翻面效果
weixin_30770495的博客
09-23 491
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css翻面</title> <style type="text/css"> .box { ...
css对称旋转,CSS3 transform平面旋转
weixin_31691749的博客
08-03 1007
CSS3 transform平面旋转1、translate(x,y) 设置盒子位移2、scale(x,y) 设置盒子缩放3、rotate(deg) 设置盒子旋转4、skew(x-angle,y-angle) 设置盒子斜切.weiyi,.suofang,.xuanzhuan,.xieqie{width: 100px;height: 100px;margin: 50px auto;border: 3p...
如何用CSS将DIV变得有正反面，能像卡牌一样反转
curry_xiao的博客
05-03 2953
最终效果如下 总所周知，div盒子是一个二维的盒子，没有厚度。如果仅仅将div的盒子翻转180度，div里面的内容仍会显现出来，并不会有正反面的效果。本次实践就是将div盒子实现有正反面的效果，能够像卡片一样翻面。 首先要先建立两个盒子，当作卡片的正反面，这两个盒子通过定位来重叠放到一起。 原理就是重叠的两个盒子同时进行旋转。要注意的地方是，下面的盒子需要先设置透明度来隐藏，不然一起旋转的时候视觉效果会很奇怪。接着给前后两个盒子，同时添加动画效果。上面的盒子旋转至90度时，透明度.
css3D效果的实现（透视的简单了解）
邻家小哥哥的博客
11-25 2466
3D效果 tramsform-style: preserve-3D；保留3D效果； backface-visibility 设置元素背面是否可见； 透视 perspective：透视（添加给父元素） 电脑是2D 平面，图像之所以具有立体感（3D 效果），其实只是一 种视觉干扰，通过透视可以实现此目的。 透视可以将 2D 平面，在转换的过程当中，呈现 3D 效果。当然并不是所有情况都需要透视。 值...
css 样式-位移-基本使用
lijieaace的博客
05-06 1217
位移-基本使用 1、 transform: translate(x轴, y轴)，正值- 向右或者向下 负值-向左或者向上 2、注意：百分比 是相对于自己的百分比 /* 鼠标移入到父盒子，son改变位置 / .father:hover .son { / transform: translate(100px, 50px); / / 百分比: 盒子自身尺寸的百分比 / / transform: translate(100%, 50%); / / transform: translate(-100%, 50%);
CSS实现横向滚动-x轴滚动
Mitin_的博客
11-02 3518
【代码】CSS实现横向滚动-x轴滚动。
简单随笔~
TeFuir__Lv的博客
11-27 1080
简单随笔~
css实现翻牌效果动画
05-19
CSS实现翻牌效果动画可以使用CSS 3D转换和CSS动画来实现。以下是实现的步骤： 1. 创建一个容器，用于包含翻转的两个面。 2. 给容器添加一个透视效果，使其能够呈现出三维效果。 ``` .container { perspective: 1000px; } ``` 3. 创建两个面，分别用于显示正面和背面的内容，并将它们放置在容器中。 ``` <div class="container"> <div class="card"> <div class="front">正面</div> <div class="back">背面</div> </div> </div> ``` 4. 使用CSS 3D转换将背面旋转180度，并设置初始状态为不可见。 ``` .card { transform-style: preserve-3d; transition: all 0.5s ease; } .back { transform: rotateY(180deg); display: none; } ``` 5. 使用CSS动画在容器的鼠标悬停事件时触发翻转效果，并切换正反面的可见状态。 ``` .container:hover .card { transform: rotateY(180deg); } .container:hover .card .front { display: none; } .container:hover .card .back { display: block; } ``` 完整的代码如下： ``` <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>翻牌效果动画</title> <style> .container { perspective: 1000px; width: 200px; height: 200px; } .card { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: all 0.5s ease; } .front, .back { position: absolute; top: 0; left: 0; width: 100%; height: 100%; backface-visibility: hidden; } .front { background-color: #e74c3c; color: #fff; } .back { background-color: #2ecc71; color: #fff; transform: rotateY(180deg); display: none; } .container:hover .card { transform: rotateY(180deg); } .container:hover .card .front { display: none; } .container:hover .card .back { display: block; } </style> </head> <body> <div class="container"> <div class="card"> <div class="front">正面</div> <div class="back">背面</div> </div> </div> </body> </html> ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值