如何使一个Div盒子看起来有3D效果

Question

这是我目前拥有的内容：

 <style type="text/css">
.signupsubmit {
        line-height: 32px;
        position: absolute;
        left: 36px;
        color: white;
        top: 527px;
        font-family: arial;
        font-size: 17px;
        font-weight: 600;
        width: 137px;
        height: 30px;
        border-color: #00297A;
        border-radius: 4px;
        border: 1px solid black;
        border-style: solid;
        background-color: #FFB630;
        text-indent: 30px;
        }
<style>
<div class = "signupsubmit">Continue</div>

有没有人能够提供如何使“继续”按钮看起来立体而不是平面的示例代码？

- Leo L.

---

你是否有一个现有的网站示例，展示你想要实现的3D效果？ - Niloct

你具体指的是什么意思，3D是吗？ - max

@Niloct，如果你查看Facebook的主页，你会看到一个绿色的注册按钮。我想做类似的东西。 - Leo L.

你可以在Chrome中非常容易地检查按钮。检查器会告诉你应用的每个样式。阅读此文档：https://developers.google.com/web/tools/chrome-devtools/iterate/inspect-styles/basics - Niloct

@Niloct，我明白你的意思，也知道如何实现。但我想编辑代码，使得盒子看起来像是朝向你弹出的3D效果。 - Leo L.

Answer 1

只需添加盒子阴影，可能是最简单的方法：

https://jsfiddle.net/zt2x0bct/

box-shadow: 0 1px 6px rgba(0, 0, 0, 0.12), 0 1px 4px rgba(0, 0, 0, 0.24);

编辑: 根据您的评论，似乎您正在寻找一个“渐变”。请查看更新的fiddle。您也可以使用在线渐变生成器来帮助完成这个过程。以下是一个您可以修改“开始”和“结束”背景颜色的生成器。或者您可以单击“展示”，找到一个接近您要寻找的按钮：

http://css3button.net/

- prograhammer

---

如果你查看Facebook的注册页面，你会看到一个绿色的注册按钮。我想做类似的东西。 - Leo L.

然后按F12（在Firefox上）并选择Facebook页面上的按钮。你会看到CSS ;) - Fundhor

请再次查看更新后的fiddle链接。为您添加了新的渐变按钮。 - prograhammer

Answer 2

我不确定是否涉及到3D，但是你可以使用“rotate”命令将其制作成仿佛在三维环境中的效果。

.signupsubmit {
    transform: rotateY(70deg) rotateX(70deg);
    -webkit-transform: rotateY(70deg) rotateX(70deg);
    transition: 2s;
        line-height: 32px;
        left: 36px;
        color: white;
        text-align: center;
        top: 527px;
        border: none;
        font-family: arial;
        font-size: 17px;
        font-weight: 500;
        width: 137px;
        height: 30px;
        border-radius: 2px;
        background-color: #FFB630;
        text-indent: 30px;
     box-shadow: 0 1px 6px rgba(0, 0, 0, 0.12), 0 1px 4px rgba(0, 0, 0, 0.24);
        }
        .signupsubmit:hover {   
-webkit-transform: rotateY(0deg) rotateX(0deg);
    transform: rotateY(0deg) rotateX(0deg);
}

<button class="signupsubmit">continue</button>
<p>You can also make a smooth transition with transition: (ex:2s);</p>

- Anthony

Answer 3

感谢大家的帮助。我终于得到了答案，并将把它写下来。感谢 Niloct 提供有关使用检查元素的指南。

<div class = "signupsubmit">Continue<div>
<style type = "text/css">
    .signupsubmit {
        webkit-appearance: none;
        align-items: flex-start;
        background-attachment: scroll;
        background-clip: border-box;
        background-color: #FFA500;
        background-origin: padding-box;
        background-size: auto;
        border-bottom-color: black;
        border-bottom-left-radius: 5px;
        border-bottom-right-radius: 5px;
        border-bottom-style: solid;
        border-bottom-width: 1px;
        border-image-outset: 0px;
        border-image-repeat: stretch;
        border-image-slice: 100%;
        border-image-source: none;
        border-image-width: 1;
        border-left-color: black;
        border-left-style: solid;
        border-left-width: 1px;
        border-right-color: black;
        border-right-style: solid;
        border-right-width: 1px;
        border-top-color: black;
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
        border-top-style: solid;
        border-top-width: 1px;
        box-shadow: #80B2FF 0px 1px 1px 0px inset;
        box-sizing: border-box;
        color: rgb(255, 255, 255);
        cursor: pointer;
        direction: ltr;
        display: inline-block;
        font-family: 'Arial', 'Helvetica Neue', 'Segoe UI', 'Malgun Gothic', Meiryo, 'Microsoft JhengHei', helvetica, arial, sans-serif;
        font-size: 12px;
        font-stretch: normal;
        font-style: normal;
        font-variant: normal;
        font-weight: bold;
        height: 31px;
        letter-spacing: 1px;
        line-height: 15.12px;
        margin-bottom: 10px;
        margin-left: 0px;
        margin-right: 0px;
        margin-top: 10px;
        min-width: 194px;
        padding-bottom: 7px;
        padding-left: 20px;
        padding-right: 20px;
        padding-top: 7px;
        position: relative;
        text-align: center;
        text-indent: 0px;
        text-rendering: optimizeLegibility;
        text-shadow: rgba(0, 0, 0, 0.498039) 0px 1px 2px;
        text-transform: none;
        width: 194px;
        word-spacing: 0px;
        writing-mode: lr-tb;
        -webkit-writing-mode: horizontal-tb;
        zoom: 1;
        left: 37px;
        top: 515px;
        position: absolute;
        }
</style>

- Leo L.

Answer 4

从this复制并致谢

div {
  transform:
    perspective(75em)
    rotateX(18deg);
  box-shadow:
    rgba(22, 31, 39, 0.42) 0px 60px 123px -25px,
    rgba(19, 26, 32, 0.08) 0px 35px 75px -35px;
  border-radius: 10px;
  border: 1px solid;
  border-color:
    rgb(213, 220, 226)
    rgb(213, 220, 226)
    rgb(184, 194, 204);
}

- Kurkula