纯CSS实现3D效果旋转效果按钮_附源代码

最新推荐文章于 2024-04-02 09:52:48 发布

G018_star sky♬

最新推荐文章于 2024-04-02 09:52:48 发布

阅读量941

点赞数 1

分类专栏： CSS 前端页面设计文章标签： css css3

本文链接：https://blog.csdn.net/qq_42526440/article/details/99683599

版权

CSS 同时被 3 个专栏收录

51 篇文章 0 订阅

订阅专栏

前端

46 篇文章 0 订阅

订阅专栏

页面设计

12 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>3D Button hover Effects</title>
	<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
	<a href="#">
		<span>Button</span>
		<span></span>
		<span></span>
		<span>Button</span>
	</a>
</body>
</html>

CSS代码如下：

body{
	margin:100;
	padding:100;
	display:flex;
	justify-content: :center;
	align-items:center;
	min-height:100vh;
	background: #00293c;
	font-family: :sans-serif;	
}
a{
	position:relative;
	width:160px;
	height:60px;
	transform-style:preserve-3d;
	transform:perspective(500px) rotateY(25deg);
	transition:2s;
	
}
a:hover{
	transform: perspective(500px) rotateY(385deg);
}
a span{
	position:absolute;
	top:0;
	left:0;
	display:block;
	width:100%;
	height:100%;
	justify-content:center;
	align-items:center;
	font-size:24px;
	letter-spacing:2px;
	color:#333;
	text-transform:uppercase;
	box-sizing:border-box;
	background:#fff;
}
a span:nth-child(1)
{
transform:translateZ(20px);
border-left:6px solid #65cbf9;
border-right:6px solid 	#65CBF9;
}
a span:nth-child(4){
	transform:translateZ(-20px);
	border-left: 6px solid #65CBF9;
	border-right: 6px solid #65CBF9;
}
a span:nth-child(2),
a span:nth-child(3)
{
	width:40px;
	height:100%;
	background: #0095d8;
}
a span:nth-child(2){
	transform: rotateY(90deg) translateZ(140px);
}
a span:nth-child(3)
{
	transform:rotateY(90deg) translateZ(-20px);
}

效果图如下:
在这里插入图片描述