瞭解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/