无法理解 css 变换属性

Question

我正在尝试设置博客文章日期的样式，其中年份垂直对齐。出于某种原因，我知道这是我的错，它的位置不正确。试图让它正确冲洗。

css：

a{color:#000; text-decoration:none}
.entry-date{font-family: 'PompadourBlack';}
.sep,.by-author{display:none}
h2.entry-meta{
    -moz-border-radius: 45px;
    -webkit-border-radius: 45px;
    border-radius: 45px;
    display:block;
    background-color:#a8872d;
    width: 100px;
    height: 100px;
    position:relative
}
h2.entry-meta a{width:60px; height:60px; position:absolute; top:20px; left:20px; outline:1px solid #000; display:block}
h2.entry-meta a time{position:absolute; width:100%; height:100%}
h2.entry-meta a time span{display:block; position:absolute}
span.entry-date-month{bottom:0; left:0}
span.entry-date-date{top:0; left:0; font-size:30px}
span.entry-date-year{outline:1px solid #000; top:10px; right:0; width:20px; height:100%;     -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); transform: rotate(-90deg);}

html：

<link rel="stylesheet" type="text/css" href="http://dev.bowdenweb.com/pro/watkins/fonts/pompadour/stylesheet.css" media="screen" />

<h2 class="entry-meta"><a href="http://dev.bowdenweb.com/pro/watkins/blog/?p=5" class="bookmarkdate" title="4:53 pm - October 20, 2011" rel="bookmark">

<span class="sep">Posted on </span>

<time class="entry-date" datetime="2011-10-20T05:18:15+00:00" pubdate>

<span class="entry-date-month">10</span>

<span class="entry-date-date">20</span>

<span class="entry-date-year">2011</span>

</time>

</a> <span class="by-author"> <span class="sep"> by </span> <span class="author vcard"><a class="url fn n" href="#nogo" title="View all posts by laura666" rel="author">laura666</a></span> </span> </h2>

查看 http://jsfiddle.net/jalbertbowdenii/RmqQ6/4/

Answer 1

不确定我是否正确解释了您的意图，但这里有一个修复：

span.entry-date-year{
 outline: 1px solid #000; 
 width:100%;
 /* if you change this value make sure it's in all three 15px */ 
 height:15px; 
 left: -15px;
 line-height: 15px;
 text-indent: 3px;
 -webkit-transform: rotate(-90deg); 
 -moz-transform: rotate(-90deg); 
 -o-transform: rotate(-90deg);
 -ms-transform: rotate(-90deg);   
 transform: rotate(-90deg);  
 /* this is the property that helps you position the rotation */
 -webkit-transform-origin: top right; 
 -moz-transform-origin: top right;
 -o-transform-origin: top right;
 -ms-transform-origin: top right;
 transform-origin: top right;
}

http://jsfiddle.net/6LpjX/< /a>