让交互更加生动!巧用CSS实现鼠标跟随 3D 旋转效果
/* 定义基本的div样式 */
.box {
width: 100px;
height: 100px;
background: #7F589F;
margin: 50px;
perspective: 1500px; /* 设置3D效果的视角 */
}
/* 鼠标悬停时触发动画 */
.box:hover .card {
transform: rotateY(360deg); /* 鼠标悬停时旋转360度 */
transition: transform 1s ease-in-out; /* 动画过渡效果 */
}
/* 定义包裹div的样式 */
.card {
width: 100%;
height: 100%;
backface-visibility: hidden; /* 隐藏背面 */
transition: transform 1s ease-in-out; /* 初始过渡效果 */
}
/* 定义包裹div内部元素的样式 */
.card > div {
width: 100%;
height: 100%;
line-height: 100px;
text-align: center;
backface-visibility: hidden; /* 隐藏背面 */
position: absolute;
}
/* 定义正面样式 */
.card .face.front {
background: #7F589F;
z-index: 2;
}
/* 定义背面样式 */
.card .face.back {
background: #95D48A;
transform: rotateY(180deg); /* 将背面旋转180度 */
}
这段代码展示了如何使用CSS创建一个鼠标悬停时的3D旋转效果。.box
是最外层的容器,它有一个3D视角,.card
是实际旋转的元素,.face
定义了两个面,分别是正面和背面,通过悬停.box
触发.card
的旋转动画。
评论已关闭