要使用CSS實現div切換效果，可以使用CSS的切換規則(如：position: relative和position: absolute)來將div元素定位到不同的位置。還可以使用CSS的transform屬性(如：旋轉、縮放、平移等)來改變div元素的大小和位置。

下面是一個簡單的示例，演示了如何使用CSS實現div切換效果：

HTML代碼：

<div class="container">

<div class="item">這是一個div元素</div>

<div class="item">另一個div元素</div>

<div class="item">第三個div元素</div>

</div>

CSS代碼：

.container {

width: 300px;

height: 300px;

background-color: blue;

.item {

display: flex;

flex-wrap: wrap;

.item:nth-child(1) {

position: relative;

.item:hover {

background-color: red;

.item:nth-child(2) {

position: absolute;

top: 50px;

left: 250px;

.item:hover:nth-child(2) {

transform: rotateY(-45deg);

transform-origin: 0 100%;

在這個示例中，我們創建了一個名為“container”的div元素，并在其中添加了多個名為“item”的div元素。每個div元素都被設置了一個不同的樣式，包括顏色、大小和位置。我們還使用CSS的flex布局來將多個div元素分組在一起。

當用戶鼠標懸停在“item”元素上時，我們將“item”元素定位到不同的位置。使用“:hover”偽類來模擬鼠標懸停效果，并使用CSS的transform屬性來改變div元素的大小和位置。

這個示例演示了如何使用CSS實現div切換效果。通過使用不同的樣式和切換規則，可以創建各種復雜的布局和交互效果。