旋轉文字的CSS程式碼

admin發表於2017-02-11
CSS

文字旋轉效果如果使用CSS2很難實現，不過CSS3已經提供現成的屬性，下面就是一段這樣的程式碼例項和大家分享一下，希望能夠給大家帶來借鑑作用，程式碼如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title>
<style type="text/css"> 
.mouth{ 
  font-size:20px; 
  font-weight:bold; 
  border:1px solid #F00; 
  display:block; width:50px; 
  -webkit-transform: rotate(-90deg); 
  -moz-transform: rotate(-90deg); 
} 
</style> 
</head> 
<body> 
<div class="example"> 
<span class="mouth">09</span> 
</div> 
</body> 
</html>

相關文章