如何使一個DIV盒子看3D

-1

<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>

有人能寫的如何使Continue按鈕看3D而不是2D的例子嗎？

來源

2015-10-18 Leo L.

你有你正在試圖做的3D效果現有網站的例子嗎？ – Niloct

你的意思是3D究竟是什麼？ – makshh

@Niloct，如果你檢查Facebook的主頁，你會看到一個綠色的註冊按鈕。我想要做那樣的事情。 –

https://jsfiddle.net/zt2x0bct/

只需添加一個箱陰影。也許simpliest方式：

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

編輯：基於您的評論，聽起來像你正在尋找一個「梯度」。看到更新的小提琴。您還可以使用在線漸變生成器來幫助完成此操作。這裏有一個你可以修改「開始」和「結束」的背景顏色。或者你可以點擊「櫥窗」，找到一個按鈕，是接近你在找什麼：

http://css3button.net/

來源

2015-10-18 21:00:44 prograhammer

如果您查看Facebook的註冊頁面，則會顯示一個綠色註冊按鈕。我想要做那樣的事情。 –

然後按F12（在Firefox上）並在Facebook頁面上選擇btuton。你會看到CSS;） – Fundhor

再次看到更新的小提琴鏈接。爲您添加了新的漸變按鈕。 – prograhammer

你的幫助謝謝你們。我終於得到了答案，我會寫下來。感謝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>

來源

2015-10-19 04:19:51

我不確定關於3D，但是您可以使它看起來好像是在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>

來源

2017-12-31 22:02:04 Anthony

如何使一個DIV盒子看3D

回答

相關問題