CSS 实现硬币翻转

最新推荐文章于 2024-03-01 09:44:15 发布

RETURN100ERRORS

最新推荐文章于 2024-03-01 09:44:15 发布

阅读量780

点赞数

分类专栏： CSS 文章标签： css css3 前端

本文链接：https://blog.csdn.net/RETURN100ERRORS/article/details/124515714

版权

CSS 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

效果图:
在这里插入图片描述
代码:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	
	<style>
		.box{
			position: relative;
			width: 200px;
			height: 200px;
			margin: 100px auto;
			transition: all 2s;
			/* 子元素增加视距 */
			perspective: 500px;
			/* 旋转时子元素保持3d效果 */
			transform-style: preserve-3d;
		}
		
		.box:hover{
			transform: rotateY(180deg);
		}
		
		.box>div{
			position: absolute;
			width: 100%;
			height: 100%;
			border-radius: 50%;
			cursor: pointer;
			
			line-height: 200px;
			text-align: center;
			color: white;
			font-weight: 700;
			font-size: 25px;
		}
		
		.front {
			background-color: rgba(255, 106, 0);
			transform: translateZ(1px) ;
		} 
		
		.back {
			background-color: rgba(51, 51, 51);
			transform: rotateY(180deg);
		}
		
		

		
		
	</style>
	<body>
		<div class="box">
			<div class="front"> ARE YOU OK ? </div>
			<div class="back"> 干翻华为 </div>
		</div>
		
	</body>
</html>

RETURN100ERRORS

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
CSS 实现硬币翻转

效果图:代码:<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <style> .box{ position: relative; width: 200px; height: 200px; margin: 100px auto; transition:
复制链接

扫一扫