【前端学习之旅】3D旋转导航栏

最新推荐文章于 2023-06-12 18:39:03 发布

Nerute

最新推荐文章于 2023-06-12 18:39:03 发布

阅读量423

点赞数

本文链接：https://blog.csdn.net/hsx201612/article/details/82153193

版权

没啥好说的，来，直接上代码，很多网上的代码令人费解，我自己做了个简化版的，希望可以看懂吧，注释没写，应该过几个月我还是可以看得懂的（哈哈哈）

来！

<!DOCTYPE html>
<html>
<head>
	<title></title>
<style>
* {
	padding: 0;
	margin: 0;
}
.rotate {									
	position: absolute;	
	left: 250px;
	top: 250px;	
	width: 200px;
	background: red;
}						
.rotate .front {
	width: 180px;
	height: 40px;
	transform-origin: bottom;
	text-align: center;
	color: #fff;
	background: skyblue;
    transform: rotateX(0deg) translateZ(25px);
	border-bottom: 1px solid #f90;			
}
.rotate .back {
	width: 180px;
	height: 40px;
	background: blue;
	text-align: center;
	color: #fff;
	transform-origin: top;
	transform: translateZ(25px) rotateX(90deg);
}
.rotate:hover {
	transform-origin: center;
	transform: rotateX(-90deg);
	transition: 1s;
}
.rotate {	
	transform-style: preserve-3d;
	transition: 1s;
}
</style>
</head>
<body>
	<div class="rotate">
		<div class="front">Servies</div>
		<div class="back">Servies</div>
	</div>
</body>
</html>

效果图如下所示：

Nerute

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【前端学习之旅】3D旋转导航栏

没啥好说的，来，直接上代码，很多网上的代码令人费解，我自己做了个简化版的，希望可以看懂吧，注释没写，应该过几个月我还是可以看得懂的（哈哈哈）来！&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;title&gt;&lt;/title&gt;&lt;style&gt;* { padding: 0; margin: 0;}....
复制链接

扫一扫