如何製作星球大戰介紹形狀的textarea？

通常情況下，文本域都只是無聊的老橢圓形的影子：如何製作星球大戰介紹形狀的textarea？

An ordinary textarea with the opening text from The Empire Strikes Back.

但有可能使狀如介紹星球大戰textarea的？

The famous opening text from The Empire Strikes Back.

**注：由SO #20734620: unusual shape of a textarea - 見註釋啓發*

更新：由於Niet的黑暗ABSOL我能得到它的工作。只需要玩字體和顏色。 Text area shaped like star wars crawl

textarea { 
width:600px; 
height:500px; 
transform:perspective(1000px) rotateX(45deg); 
display:block; 
margin:0 auto; 
text-align: center; 
line-height:200%; 
color: yellow; 
background-color: black; 
font-size: 1.75em; 
}

來源

2013-12-22 ialexander

這個問題的[SO＃20728150]（一個逐字拷貝http://stackoverflow.com/questions/20728150/不尋常的形狀 - 一個textarea），直到原來的文章中的蔬菜水果的撇號。唯一的區別是標題，圖像和預期效果。一個非常慈善的解釋是，你的意思是它是從原始的一個後續問題;如果是這樣，你可能只是承認，而不是複製它批發，並暗示在那裏的意見巧合。 :( –

@JordanGray我並不是故意要冒犯，我只是試圖在一個真棒問題中增加一點點的輕率，我想到有足夠多的人在看我寫這個的時候，如果我做了我的模仿它不會造成太多的羽毛 – ialexander

@wormtown在StackOverflow上很容易「折皺人們的羽毛」如果你認爲某個帖子可能會損壞某人的羽毛，那麼該帖子可能會被關閉或在一小時內刪除 –

嘗試3D變換：

#starwarstextareaofawesome { 
    width:600px; 
    height:500px; 
    transform:perspective(1000px) rotateX(45deg); 
}

Demo

來源

2013-12-22 22:19:54

我想出了相同的答案。他是一個使用div的演示程序：http://jsbin.com/oteJIru/1/edit?html,css,output –

這是一個很好的解決方案。我的問題是滾動速度仍然過快。我嘗試將warp設置爲負parsecs，但這只是使一切變小。 – ialexander

滾動速度應該與帶滾動條的任何其他元素相同。你想如何滾動它？ –

如何製作星球大戰介紹形狀的textarea？

回答

相關問題