CSS3是Web前端技術中比較重要的一部分，它的出現(xiàn)讓Web頁面的表現(xiàn)更加生動、多彩。今天我們來實驗一下CSS3的一些應用。

首先是CSS3的盒子陰影效果。在HTML中，我們加入一個div，并為其設置一些樣式：

<style>
.box-shadow {
width: 200px;
height: 200px;
background-color: #f5f5f5;
box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.5);
}
</style>
<div class="box-shadow"></div>

這段代碼將產(chǎn)生一個200x200像素的灰色盒子，并為其添加了一個陰影效果。其中，box-shadow屬性的值決定了陰影的大小、位置、模糊度以及顏色。

接下來，我們測試一下CSS3的旋轉效果。同樣的，我們先創(chuàng)建一個div，并為其添加樣式：

<style>
.rotate {
width: 100px;
height: 100px;
background-color: #f5f5f5;
position: relative;
left: 50px;
top: 50px;
transform: rotate(30deg);
}
</style>
<div class="rotate"></div>

這段代碼將產(chǎn)生一個100x100像素的灰色盒子，并使其旋轉了30度。其中，transform屬性是CSS3中的變換屬性，可以實現(xiàn)旋轉、縮放、平移等效果。這里使用了旋轉變換。

最后，我們測試一下CSS3的過渡效果。在HTML中，創(chuàng)建兩個div：

<style>
.transition-1 {
width: 100px;
height: 100px;
background-color: #f5f5f5;
position: relative;
left: 0;
transition: left 2s ease-in-out;
}
.transition-2 {
width: 100px;
height: 100px;
background-color: #777777;
position: relative;
left: 200px;
transition: left 2s ease-in-out;
}
.wrapper:hover .transition-1 {
left: 200px;
}
.wrapper:hover .transition-2 {
left: 0;
}
</style>
<div class="wrapper">
<div class="transition-1"></div>
<div class="transition-2"></div>
</div>

這段代碼將創(chuàng)建一個包裝容器wrapper，其中包含兩個div（transition-1和transition-2），它們在容器的兩側。當鼠標移到容器上時，transition-1會向右移動，transition-2會向左移動，兩者通過transition屬性實現(xiàn)了移動的平滑過渡。

以上就是我們的CSS3實驗內容，運用CSS3讓網(wǎng)站更加豐富。希望這篇文章對大家有所幫助！