hnakamur’s blog

ものすごい勢いで忘れる私のために未整理でもいいからとりあえずメモ

2009-07-30

90度単位ではない回転テキストのサンプル

できたことはできましたが、IEのはビットマップイメージを回転しているのでがたがたになってしまいました。

参考: DXImageTransform.Microsoft.Matrix

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Text rotation</title>
<style type="text/css">
.example-date {
  position: relative;
  font-family: Helvetica, Arial;
}
.day {
  position: absolute;
  top: 0;
  left: 0;
  font-size: 32pt;
}
.month {
  position: absolute;
  top: 32pt;
  left: 0;
  font-size: 18pt;
}
.year {
  position: absolute;
  top: 10pt;
  left: 32pt;
  font-size: 12pt;
  display: block;
  -webkit-transform: rotate(-30deg); 
}
.year, x:-moz-broken {
  position: absolute;
  top: 8pt;
  left: 32pt;
  font-size: 12pt;
  -moz-transform: rotate(-30deg); 
}
</style>
<!--[if IE]>
<style type="text/css">
.year {
  filter:progid:DXImageTransform.Microsoft.Matrix(
  M11=0.866,
  M12=0.5,
  M21=-0.5,
  M22=0.866,
  Dx=1.0,
  Dy=1.0,
  FilterType='bilinear',
  sizingMethod='auto expand'
  );
  top: 4pt;
  left: 32pt;
}
</style>
<![endif]-->
</head>
<body>
  <div class="example-date">
    <span class="day">31</span> 
    <span class="month">JULY</span> 
    <span class="year">2009</span>
  </div>
</body>
</html>

0 件のコメント:

ブログ アーカイブ