[分享]css3围绕y轴翻转

CSS3提供了丰富的3D效果，其中围绕y轴翻转是一种常见的效果，可以使元素在立体空间中呈现出不同的视角。/ 被翻转的元素 / .flipcontainer { perspective: 1000px;...

CSS3提供了丰富的3D效果，其中围绕y轴翻转是一种常见的效果，可以使元素在立体空间中呈现出不同的视角。

/* 被翻转的元素 */
.flip-container {
  perspective: 1000px; /* 设置透视点，使元素产生立体感 */
}

/* 元素的正面 */
.front {
  transform: rotateY(0deg); /* 围绕y轴不翻转 */
}

/* 元素的背面 */
.back {
  transform: rotateY(180deg); /* 围绕y轴翻转180度 */
}

/* 鼠标悬浮时触发的效果 */
.flip-container:hover .front {
  transform: rotateY(-180deg); /* 围绕y轴翻转180度 */
}

.flip-container:hover .back {
  transform: rotateY(0deg); /* 围绕y轴不翻转 */
} 

上述代码中，.flip-container为被翻转的元素，通过设置perspective属性，使元素产生透视感。元素正面使用.rotateY(0deg)不发生翻转，背面使用.rotateY(180deg)进行围绕y轴翻转。当鼠标悬浮在元素上时，触发.hover样式，正面进行-180度翻转，背面不发生翻转，达到立体翻转效果。