時間軸是展示歷史事件或項目進度的一種常見形式，而用CSS3制作時間軸可以讓其更加美觀和交互感。以下是CSS3時間軸的代碼實現：

.timeline {
list-style: none;
padding: 0;
position: relative;
margin-top: 50px;
}
.timeline:before {
content: "";
position: absolute;
top: 0;
bottom: 0;
width: 2px;
background-color: #ddd;
left: 50%;
margin-left: -1px;
}
.timeline >li {
margin-bottom: 50px;
position: relative;
}
.timeline >li:before,
.timeline >li:after {
content: " ";
display: table;
}
.timeline >li:after {
clear: both;
}
.timeline >li:before,
.timeline >li:after {
content: " ";
display: table;
}
.timeline >li:after {
clear: both;
}
.timeline >li >.timeline-panel {
width: 46%;
float: left;
border: 1px solid #d4d4d4;
border-radius: 2px;
padding: 20px;
position: relative;
-webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);
box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);
}
.timeline >li >.timeline-badge {
color: #fff;
width: 50px;
height: 50px;
line-height: 50px;
font-size: 1.4em;
text-align: center;
position: absolute;
top: 16px;
left: 50%;
margin-left: -25px;
background-color: #999;
z-index: 100;
border-top-right-radius: 50%;
border-top-left-radius: 50%;
border-bottom-right-radius: 50%;
border-bottom-left-radius: 50%;
}
.timeline >li.timeline-inverted >.timeline-panel {
float: right;
}
.timeline >li.timeline-inverted >.timeline-panel:before {
border-right-width: 0;
border-left-width: 15px;
right: -15px;
left: auto;
}
.timeline >li.timeline-inverted >.timeline-panel:after {
border-right-width: 0;
border-left-width: 14px;
right: -14px;
left: auto;
}

首先是.timeline類，用于包裹整個時間軸，包括時間軸的線和整個內容。其中before元素是用來表示時間軸的線，通過絕對定位和margin設置位置和樣式。然后是每個時間軸項，用li元素包裹，里面再嵌套一個.timeline-panel元素和.timeline-badge元素。這兩個元素分別表示時間軸內容和時間軸小圓點。

時間軸項的樣式需要根據方向進行反轉，這里通過timeline-inverted類來實現，通過修改位置和樣式來達到反轉效果。通過這些CSS3代碼，你可以自己制作出一個美觀的時間軸效果。