CSS3技術給網頁設計帶來了豐富多彩的效果，比如讓燈籠搖擺起來。下面就介紹幾種實現方式。

/* 第一種方式：利用transform屬性 */
.lantern{
position: absolute;
top: 0;
left: 0;
transform-origin: 50% 100%;
animation: lantern-swing 4s ease-in-out infinite;
}
@keyframes lantern-swing{
0%{ transform: rotate(-5deg); }
50%{ transform: rotate(5deg); }
100%{ transform: rotate(-5deg); }
}
/* 第二種方式：利用transition和transform屬性 */
.lantern{
position: absolute;
top: 0;
left: 0;
transform-origin: 50% 100%;
transition: transform 2s ease-in-out;
}
.lantern:hover{
transform: rotate(10deg);
}
/* 第三種方式：利用transition和rotate屬性 */
.lantern{
position: absolute;
top: 0;
left: 0;
transform-origin: 50% 100%;
transition: transform 2s ease-in-out;
transform: rotate(-5deg);
}
.lantern:hover{
transform: rotate(10deg);
}

以上是三種實現方式，大家可以根據自己的需求選擇合適的方式。無論是利用transform屬性還是transition屬性，都需要明確transform-origin的位置來實現燈籠的擺動效果。