CSS3開啟箱子效果是一種非常酷炫的網頁設計效果，可以為網頁增加一些動態交互性和視覺上的沖擊力。下面就來一起學習實現CSS3開啟箱子效果的方法。

.box {
position: relative;
margin: 50px auto;
width: 200px;
height: 200px;
background-color: #ffe6e6;
border-radius: 20px;
}
.box::before, .box::after {
content: '';
display: inline-block;
position: absolute;
width: 50%;
height: 100%;
top: 0;
background-color: #fff;
transform: skewX(-30deg);
transform-origin: top right;
transition: transform 0.5s ease;
z-index: -1;
}
.box::after {
right: 0;
transform-origin: top left;
transform: skewX(30deg);
}
.box:hover::before {
transform: skewX(-30deg) scaleX(1.5);
}
.box:hover::after {
transform: skewX(30deg) scaleX(1.5);
}

首先，我們要創建一個div容器，設置其為相對定位，同時設置一個圓角邊框和背景顏色。然后，我們需要用偽元素before和after分別創建箱子的兩邊，并讓它們向左、向右傾斜30度，使其看起來更像一個封閉的盒子。

重點：偽元素的content屬性一定要設置為空字符，否則在IE瀏覽器中會出現一些奇怪的問題。

接著，我們用鼠標hover時的動作來實現打開箱子的效果。當鼠標懸停在箱子上時，將before和after元素的skewX屬性的值重新設置為0度，同時在X軸上縮放到1.5倍，即變成原來的1.5倍寬度。這個過程中，使用了transition屬性來使動畫變得平滑自然。

小貼士：可以通過修改偽元素before和after的opacity屬性，來使打開箱子的效果更為逼真。

以上就是使用CSS3實現開啟箱子效果的方法，有沒有很酷炫呢？快去試試吧！