css3动画之翻转

最新推荐文章于 2022-09-19 22:39:21 发布

背着吉他的蝙蝠女侠

最新推荐文章于 2022-09-19 22:39:21 发布

阅读量265

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/echokkk/article/details/78820365

版权

css 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

demo代码如下：注意：这个是放上去可以发生一次翻转，离开就翻转回去，下面有jq实现的翻转效果，可以来回翻转的，每点击一次就会翻转到反方向。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		div {
			width: 200px;
			height: 200px;
			position: relative;
		}
		div::before,div::after {
			content: "";
			width: 200px;
			height: 200px;
			position: absolute;
			top: 0;
			left: 0;
			text-align: center;
			line-height: 200px;	
			font-size: 50px;
			backface-visibility: hidden;
			background: red;
			transition: all 3s;
		}
		div::before {
			content: "CCCC";
			transform: rotateY(-180deg);
		}
		div::after {
			content: "BBBB";
		}
		div:hover::after {
			transform: rotateY(180deg);
		}
		div:hover::before {
			transform: rotateY(0deg);
		}
	</style>
</head>
<body>
	<div></div>
</body>
</html>

背着吉他的蝙蝠女侠

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
css3动画之翻转

demo代码如下：注意：这个是放上去可以发生一次翻转，离开就翻转回去，下面有jq实现的翻转效果，可以来回翻转的，每点击一次就会翻转到反方向。 Document div { width: 200px; height: 200px; position: relative; } div::before,div::after { content:
复制链接

扫一扫

专栏目录