现在我们要给Get Hardboiled网站的侦探办公桌上的名片应用转换。首先用transform-origin属性来设置原点，并用rotate转换来实现不规则的设计。

我们将使用的HTML是很专业的，你找不到任何一个表象的元素或者属性。这里有九个微格式h-card，每个都有其自己的一组值来描述一个侦探的联系信息。所有卡片上都没有定义id。

 
The No. 1 Detective Agency
 
 

 
 
Shades & Staches Detective Agency
 
 

 
Command F Detective Services
 
 

 
The Fat Man
 
 

 
Hartless Dick
 
 

 
Nick Jefferies
 
 

 
Elementary, My Dear Watson
 
 

 
Shoes Clues
 
 

 
Smoke
 

首先为h-card定义通用样式。我们会给所有卡片设定相同的尺寸，并应用background-size属性来确保不管卡片多大，背景图都能与之适应。

.h-card { 
width : 300px; 
height : 195px; 
background-position : 50% 50%; 
background-repeat : no-repeat; 
background-size : 100% 100%; }

我们需要为每个元素定义不同的背景图像，但是我们并没有在HTML里定义id或者class属性，这里就要用到:nth-of-type伪元素选择器了。