CSS3 两面翻转的盒子

已于 2022-04-06 17:24:54 修改
阅读量2.8k 收藏 12
点赞数 10
分类专栏： CSS特效 文章标签： css3 html5
于 2020-02-10 10:10:57 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Zmongo/article/details/104244493
版权

在这里插入图片描述
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	body {
		perspective: 400px;
	}
		.box {
			/*翻转的是box*/
			position: relative;
			width: 300px;
			height: 300px;
			margin: 100px auto;
			transition: all .4s;
			/*让背面的紫色盒子保留立体空间*/
			/*开启3D空间*/
			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;
		}
		.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>

`

一直有小伙伴说反转不出来，开始有一个人说的时候没觉的奇怪，发现评论区的小伙伴都这样说，自己去试了一下，谷歌是可以的，ie和qq浏览器都是不可以的，于是尝试解决了下。
发现front设置了z-index是1，结果反转过来的时候它的z-index还是1，把紫色的给覆盖掉了，让它反转过来变成-1。让紫色盒子上去就能看到紫色的了。

.front:hover {
			z-index: -1;
		}

评论区大佬们提出了backface-visibility: hidden;属性，尝试了一下果然可以了。
大佬们🐂，看来css还是要重新看一遍。

.front {
			background-color: pink;
			z-index: 1;
			backface-visibility: hidden;
		}
一麻袋小猫
关注
专栏目录
CSS3实现翻转盒子
weixin_45773503的博客
03-29 890
CSS3实现翻转盒子 练习一下3d旋转 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &l...
两面翻转的盒子
qq_61838861的博客
01-23 531
html代码： <div class="box"> <div> 天官赐福</div> <div>百无禁忌</div> </div> 一直都很喜欢这种花里胡哨的东西,这次先尝试了下文字,下次可以试试图片。 css代码： <style> body{ perspective:400px; ...
CSS3|两面翻转的盒子案例
不爱吃菜的菜菜的博客
04-10 1193
要实现 鼠标经过就会盒子翻转 要有一个大盒子，大盒子里面装着两个小盒子 两个小盒子要加定位，其中前面的盒子加上z-index:1;这样就会覆盖后面的盒子 然后让后面的小盒子y轴旋转180deg，这样当让大盒子旋转180deg的时候后面的小盒子可以出现 当让大盒子旋转的时候，小盒子也要保持3d效果，给小盒子的父亲加上transform-style：preserve-3d； 如果想让盒子翻转效果更明显，给body加上透视（要在谷歌浏览器打开） <!DOCTYPE html> &
CSS案例之翻转的盒子
weixin_45336716的博客
09-03 409
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title&gt...
css3- 两面翻转的盒子、3D导航栏、旋转木马
SilentLand的博客
05-28 873
transform-style: preserve-3d;运用、3D属性运用、动画综合运用
课堂案例之两面翻转的盒子
小王的博客
11-19 639
课堂案例之两面翻转的盒子
CSS两面盒子翻转
jin_ba_dao的博客
12-07 591
CSS两面盒子翻转动画 首先在给一个大盒子里面包含两个盒子 <div class="box"> <div class="front">好好学习</div> <div class="back">天天向上</div> </div> CSS body { /*设置元素被查看位置的视图,看着给合适的值*/ perspective: 400px; } .box {
CSS3之两面翻转的盒子案例
小杨的博客
07-21 1200
两个小盒子要加定位，其中前面的盒子加上z-index:1;这样就会覆盖后面的盒子. 然后让后面的小盒子y轴旋转180deg，这样当让大盒子旋转180deg的时候后面的小盒子可以出现.原理是使用css3中的3D旋转属性，需要一个父盒子和两个子盒子，将第一个子盒子作为正面，第二个子盒子作为反面，所以先把第二个子盒子沿y轴旋转180度。然后设置父盒子 …原理是使用css3中的3D旋转属性，需要一个父盒子和两个子盒子，将第一个子盒子作为正面，第二个子盒子作为反面，所以先把第二个子盒子沿y轴旋转180度。然后设置父盒
3D呈现transform-style及案例-两面翻转的盒子
WangZhang_521的博客
01-13 544
01-3D呈现transform-style <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"&
JS案例-两面翻转盒子案例
qq_43781887的博客
05-23 576
需要实现的效果： 鼠标移动到这个盒子上之后，翻转盒子，最后变成： 注意：需要在父盒子上面开启子盒子3d呈现，同时需要注意要设置前面的盒子的背面隐藏，即 backface-visibility: hidden，否则盒子翻转之后背面的盒子会被前面盒子的背面给覆盖掉。 完整代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> &lt...
html5实现3D动态旋转效果
01-07
这是通过html5实现有3D动态旋转效果，效果很不错。
html5 3D立方体动画 演示各个方向的翻转动画.rar
07-10
3D盒子模型动画，html5 3D立方体动画，演示了各个方向的翻转动画，点击下边各个方向按钮，盒子会在对应方向上翻转，鼠标移上盒子，动画效果即可播放。
两面翻转的盒子案例
fusheng_cn的博客
04-19 467
两面翻转的盒子案例
两面翻转的盒子（解决转后不显示问题）
周百万的博客
03-10 1238
如图所示：鼠标一碰到盒子，盒子就会翻转！ 重点来了，很多小伙伴会发现盒子转动后不显示后面的盒子：需要在".front" 标签上加 backface-visibility: hidden; 加上这行代码就可以啦！ 代码如下： <style> .box { position: relative; margin: 100px auto; width: 300px; heig..
html5css3项目6：3D的项目有两面翻转的盒子、3D导航栏、旋转木马
小黄呀呀呀的博客
05-18 889
1、两面翻转的盒子 思路： 先设置一个父盒子，然后添加两个子盒子，这两个子盒子都要设置为定位，因为这样这两个才能重叠起来，如果想要实现翻转的效果，需要实现将一个盒子旋转180度，不过这样是不够的，因为父盒子默认孩子盒子是关闭3d效果的，只要父亲一转，孩子就恢复原样，所以解决方法是在父盒子里设置transform-style，然后最后给父亲盒子旋转，即可。不过要给父盒子添加过渡的效果。 <!DOCTYPE html> <html lang="en"> <head>
CSS3两面盒子翻转（backface-visibility的使用）
最新发布
mzp520lf的博客
11-25 627
CSS3两面盒子翻转（backface-visibility的使用）
css3实现酷炫的3D盒子翻转代码
zxd的博客
09-17 685
css3实现酷炫的3D盒子翻转代码 最近在项目中，产品经理要求要把盒子做成3d翻转的效果，也不给demo,也不给效果图，所以抽空了解了一下CSS3的3D功能，做了一个简单的demo,下次要是产品经理来就给他看demo,看是不是这个效果，同事也及时把代码备份，以后要用到呢？ 步骤 1.先用css将6张图片摆成下图的样子 2.接下来就是CSS代码了，这个是vue组件哈，如果做成html，直接把html和CSS考出来就ok了。 <template> <div class="demo"&
css3 3D旋转实例 两面反转的盒子
HARDWORKING SURELY PAYS OFF
04-21 966
原理是使用css3中的3D旋转属性，需要一个父盒子和两个子盒子，将第一个子盒子作为正面，第二个子盒子作为反面，所以先把第二个子盒子沿y轴旋转180度。然后设置父盒子的hover属性，当鼠标悬停时，让父盒子反转180度即可。 让人很迷惑的一点是，这个效果在chrome上可以正常实现，但是在firefox上，第一个子盒子永远处于上方，即使翻到反面也显示第一个盒子处在上面，很奇怪。。。 <!DOCTYPE html> <html lang="en"> <head> &l
3D转换 —— 两面翻转盒子和3d导航栏
爱前端的程序媛的博客
03-22 951
3d转换和2d转换的最大区别就是，2d是二维坐标系，是平面的，而3d是三维坐标系，具有空间感、立体感。在3d转换中，有两个特别重要的属性perspective、transform - style。 perspective：透视，也叫视距，就是人眼距离屏幕的距离。距离屏幕越近(透视越小)物体越大，距离屏幕越远(透视越大)物体越小。 1. 透视是写在父级元素上的 2. 透视单位 ：px tra...
CSS3 3D翻转色子特效教程与代码实例
本文档详细介绍了如何使用CSS3技术来实现3D色子翻转特效。CSS3的3D转换功能使得开发者能够突破传统2D设计的限制，创造出丰富的立体视觉效果。作者首先从HTML结构开始，构建了一个基本的色子模型，包括一个外层的`...
评论 17
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值