CSS3日歷翻轉

.calendar{
position: relative;
height: 300px;
width: 200px;
border: 1px solid #ccc;
perspective: 1000px; /*設置透視*/
cursor: pointer;
}
.calendar:hover .month{
transform: rotateY(-180deg); /*翻轉效果*/
}
.calendar:hover .month-back{
transform: rotateY(0deg); /*翻轉效果*/
}
.month{
position: absolute;
transform-style: preserve-3d; /*保持3D效果*/
transition: transform .5s; /*過渡效果*/
height: 100%;
width: 100%;
backface-visibility: hidden; /*不顯示背面*/
}
.month-back{
position: absolute;
transform-style: preserve-3d; /*保持3D效果*/
transition: transform .5s; /*過渡效果*/
height: 100%;
width: 100%;
transform: rotateY(180deg); /*翻轉效果*/
backface-visibility: hidden; /*不顯示背面*/
}
.front, .back{
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.back{
transform: rotateY(180deg); /*翻轉效果*/
}

實現效果：

使用CSS3的transform和transition屬性，實現了一個簡單的日歷翻轉效果。