平移旋转：将序列编号进行变换
<!DOCTYPE html>
<html>
<head>
<title>动画</title>
<style type="text/css">
/*将下列序列编号进行平移旋转*/
.rules{
list-style: none;
counter-reset: rulecount 2;/*计数器重置，命名为rulecount*/
}
.rules li{
counter-increment: rulecount;/*以此计数器递增*/
position: relative;/*为li设置定位（相对定位）*/
}
.rules li:before{
background: #637ab7;
content: '$' counter(rulecount);/*将计数器和标符写进伪元素before内*/
position: absolute;/*绝对定位后，标号自动跑到区块左上角*/
transform-origin: 100% 100%;/*将原点位置设置为右下角*/
transform: translate(-100%,-100%) rotate(-90deg);/*进行平移旋转*/
}
</style>
</head>
<body>
<ol class="rules" start="3">
<li>today is 2019-7-28,hot</li>
<li>list-style:none;去掉列表的默认样式（去掉编号）</li>
<li>counter-reset:rulecount 2;当前计数器已经重置为rulecount（计数器的名字）的值</li>
<li>counter-increme：rulecount；每一项都以rulecount递增</li>
<li>content：'$' counter(rulecount);在rulecount前面加上符号$</li>
<li>哦耶</li>
</ol>
</body>
</html>
效果图：
