CSS3 蘋果解鎖，是一種利用 CSS3 技術來模擬蘋果手機解鎖的效果。它是通過設置元素旋轉、縮放、透明度等 CSS 屬性，并配合過渡效果來實現(xiàn)的。

.slide-to-unlock {
width: 400px;
height: 120px;
background: #fff;
border: 1px solid #ccc;
box-shadow: 0 0 10px #ccc;
position: relative;
overflow: hidden;
}
.slider {
width: 300px;
height: 80px;
position: absolute;
top: 20px;
left: -50px;
background: #ccc;
border-radius: 40px;
box-shadow: 0 0 10px #aaa;
transform: rotate(-45deg) skew(-15deg);
cursor: pointer;
transition: all .5s ease-in-out;
}
.unlock:hover .slider {
left: 370px;
transform: rotate(-45deg) skew(-15deg) translateX(400px);
}

CSS3 蘋果解鎖效果的核心代碼就是以上的樣式代碼。通過設置高寬、背景、邊框等基本樣式，然后設置寬度為 300px 的 .slider 會覆蓋在 .slide-to-unlock 的左側。接著，在 .slider 上設置旋轉、傾斜等變換效果，并設置光標樣式為 pointer，以及過渡動畫效果。最后，在 .unlock:hover 時將 .slider 的 left 屬性設為 370px，即移動 400px，同時應用旋轉、傾斜和平移等多個變換效果，從而實現(xiàn)蘋果解鎖效果。