写一个3D按钮
时间: 2024-02-19 11:02:35 浏览: 25
以下是一个简单的 3D 按钮的代码示例,使用 HTML 和 CSS 实现:
```html
<button class="button">
<div class="front">按钮</div>
<div class="back">按钮</div>
<div class="left"></div>
<div class="right"></div>
<div class="top"></div>
<div class="bottom"></div>
</button>
```
```css
.button {
width: 200px;
height: 70px;
position: relative;
perspective: 1000px;
border: none;
outline: none;
color: white;
text-transform: uppercase;
font-size: 24px;
font-weight: bold;
letter-spacing: 2px;
background-color: #f44336;
cursor: pointer;
}
.front, .back {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding: 20px;
box-sizing: border-box;
}
.front {
transform-origin: center center -35px;
transform: translateZ(35px);
}
.back {
transform-origin: center center 35px;
transform: translateZ(-35px) rotateY(180deg);
}
.left, .right, .top, .bottom {
position: absolute;
width: 200px;
height: 70px;
background-color: #c62828;
}
.left {
transform-origin: left center;
transform: rotateY(-90deg) translateX(-35px);
}
.right {
transform-origin: right center;
transform: rotateY(90deg) translateX(35px);
}
.top {
transform-origin: center top;
transform: rotateX(-90deg) translateY(-35px);
}
.bottom {
transform-origin: center bottom;
transform: rotateX(90deg) translateY(35px);
}
.button:hover .front {
transform: translateZ(35px) rotateX(-30deg);
}
.button:hover .back {
transform: translateZ(-35px) rotateX(30deg) rotateY(180deg);
}
.button:hover .left {
transform: rotateY(-90deg) translateX(-35px) rotateY(-30deg);
}
.button:hover .right {
transform: rotateY(90deg) translateX(35px) rotateY(30deg);
}
.button:hover .top {
transform: rotateX(-90deg) translateY(-35px) rotateX(-30deg);
}
.button:hover .bottom {
transform: rotateX(90deg) translateY(35px) rotateX(30deg);
}
```
在这个例子中,我们使用了 CSS3 的 `transform` 属性来实现 3D 效果。`.button` 类定义了按钮的基本样式和尺寸,并启用了 3D 特性。`.front` 和 `.back` 类定义了按钮正面和反面的样式,并使用了 `transform` 属性来实现沿 z 轴的平移。`.left`、`.right`、`.top` 和 `.bottom` 类定义了按钮的左、右、上、下四个面的样式,并使用了 `transform` 属性来实现旋转、平移和变形。最后,使用 `:hover` 伪类来定义按钮的鼠标悬停时的效果。
以上代码只是一个基本示例,实际应用时可能需要根据实际需求进行调整和优化。
相关推荐
![docx](https://img-home.csdnimg.cn/images/20210720083331.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)