CSS3是一種用于構建網頁的標記語言，具有許多可用于創建交互式網頁的元素，例如動畫、樣式和布局。今天，我們將探討如何使用CSS3來創建手機左右搖晃的效果。

首先，我們需要在HTML中添加一個<button>標簽，用于設置搖晃按鈕。然后，我們可以使用CSS3的媒體查詢來設置按鈕的樣式。媒體查詢允許我們根據設備的屏幕尺寸、方向和分辨率等屬性來選擇不同的樣式。

下面是一個示例CSS代碼，用于設置手機向左或向右搖晃的效果：

```css

button {

display: inline-block;

width: 100px;

height: 100px;

background-color: #f00;

border: none;

margin: 20px 0;

padding: 20px;

cursor: pointer;

transition: all 0.3s ease;

button:hover {

background-color: #f22;

@media screen and (min-width: 768px) {

button {

transform: rotateY(-45deg);

transform-origin: 0 100%;

在這個示例中，我們使用CSS3的媒體查詢來設置搖晃效果。當用戶點擊搖晃按鈕時，我們將按鈕的樣式更改為旋轉45度，并將其定位到屏幕的右側。如果我們將媒體查詢的參數設置為“min-width: 768px”，則該樣式將只在768px以上的設備上有效。

通過使用CSS3的媒體查詢和樣式，我們可以輕松地創建手機左右搖晃的效果，使用戶在瀏覽網頁時感受到獨特的交互體驗。