3D變換後的文本模糊

我有一個div，我繞着X軸旋轉了角度。 div包含應用旋轉時變得模糊的文本。有沒有什麼辦法可以讓文本圍繞這個軸旋轉？我試過translate3d和translateZ「黑客」，但沒有成功。3D變換後的文本模糊

.tilt { 
 
    margin: 0 auto; 
 
    width: 300px; 
 
    height: 400px; 
 
    border: 1px solid #222; 
 

 
    -webkit-transform: perspective(500px) rotateX(35deg); 
 
     -moz-transform: perspective(500px) rotateX(35deg); 
 
      transform: perspective(500px) rotateX(35deg); 
 
}

<div class="tilt"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores deleniti expedita nostrum ipsam culpa rem earum recusandae saepe nulla repudiandae molestiae natus consectetur neque quasi quos laudantium doloribus iusto minima! 
 
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita id magnam labore doloribus velit quidem exercitationem aspernatur nobis dolore omnis deserunt culpa quibusdam nemo adipisci possimus nesciunt debitis minus ullam! 
 
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis commodi assumenda sed natus eligendi! Temporibus nobis molestiae aperiam ut repudiandae doloribus eveniet quod illo. Natus reiciendis eum ab itaque enim! 
 
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet fuga recusandae quisquam voluptatibus qui ipsa pariatur dolor libero cumque quod iste error porro laborum. Non quam quidem tempora corporis veniam!</div>

來源

2014-10-03 jollelj

它似乎是一個常見問題，看看這裏http://css-tricks.com/almanac/properties/p/perspective/ – GibboK 2014-10-03 09:43:17

我看着在OS/X上的2個監視器上的小提琴。在我的外接顯示器上，它確實很模糊 - 就像我的外部OS/X顯示器上的大多數文本一樣，在Macbook pro Retina顯示器上它是完美的。外觀：http://snag.gy/pmJ1W。jpg – 2014-10-07 18:31:03

在我看來，文本獲取*呈現*，然後整個呈現的矩形獲取透視變換;文本本身不會被重新繪製「透視」。因此，您會在近端獲得較胖的像素，並在中心和遠端獲得混疊僞像。 – usr2564301 2014-10-07 21:25:00

這裏是一個解決方法，以使文本少模糊。它並沒有使它像素完美，但它更好。測試在Chrome 38 FF 32和IE 11窗口7上。

重點是用font-size（在示例小提琴中我還縮放容器的寬度/高度）縮放文本（x2）並將其縮小與transform: scale(0.5);。文本以比1：1默認縮放比例更少的模糊呈現。

這裏既是小提琴的截圖（鉻38）：

Less blurry text with 3D transform

而一個DEMO

CSS：

.tilt { 
    margin: -200px auto 0; 
    width: 600px; 
    height:800px; 
    font-size:2em; 
    border: 2px solid #222; 


    -webkit-transform: perspective(500px) rotateX(35deg) scale(0.5); 
     -moz-transform: perspective(500px) rotateX(35deg) scale(0.5); 
      transform: perspective(500px) rotateX(35deg) scale(0.5); 
}

規模比優化：

當文本具有默認縮放比例，它是所迷離，因爲我們可以在原來的OP fiddle看到。當您縮放以0.1比文本中的內容和像素渲染錯誤別名：

Aliased text after 3d transform and a 0.1 scale ratio

DEMO

的關鍵是找到別名和所迷離文本之間的最佳平衡。對於OP示例，0.5給出了很好的結果，但我相信它可以進行優化。

至於建議的John Grivas，你還可以添加一個1px的文字陰影，往往使中部和頂部線條更好的渲染：

text-shadow: 0 0 1px #101010;

DEMO

正如Mary Melody所評論的，某些字體渲染效果比其他字體好，你可以查看這個DEMO與最流行的谷歌字體。

來源

2014-10-08 08:14:56

我的朋友你值得擁有！我爲此工作了兩三個小時，但我想也許會有另一種方法，所以我沒有回答。這實際上是一個你建議的解決方案！只要添加，如果你想你可以給一個像這樣的小影子http://jsfiddle.net/csdtesting/fbxc4qLq/。 :) – 2014-10-08 15:48:37

我剛纔說這是一個解決方案，我喜歡它。我說過我曾嘗試過，但添加了額外的文字陰影：0 0 1px＃101010; 。所有和我upvoted.I想支持你的答案！ – 2014-10-08 16:38:22

當然可以。如果我想出另一個想法，我會告訴你的。但是你先回答，你必須贏得這裏！ – 2014-10-08 16:59:11

3D變換後的文本模糊

回答

相關問題