简介
在本实验中,我们将学习如何使用 CSS 对元素应用带有悬停动画的透视变换。此技术对于创建引人入胜且交互式的用户界面非常有用,特别是用于显示图像或产品卡片。在本实验结束时,你将很好地理解如何使用 perspective()
和 rotateY()
函数来创建透视效果,以及如何使用过渡在悬停时更新 transform
属性。
This tutorial is from open-source community. Access the source code
💡 本教程由 AI 辅助翻译自英文原版。如需查看原文,您可以 切换至英文原版
在本实验中,我们将学习如何使用 CSS 对元素应用带有悬停动画的透视变换。此技术对于创建引人入胜且交互式的用户界面非常有用,特别是用于显示图像或产品卡片。在本实验结束时,你将很好地理解如何使用 perspective()
和 rotateY()
函数来创建透视效果,以及如何使用过渡在悬停时更新 transform
属性。
虚拟机中已经提供了 index.html
和 style.css
。
要对元素创建带有悬停动画的透视变换:
将 transform
属性与 perspective()
和 rotateY()
函数一起使用,为元素应用透视效果。例如,要创建左透视效果,使用 transform: perspective(1500px) rotateY(15deg);
。要创建右透视效果,使用 transform: perspective(1500px) rotateY(-15deg);
。
使用 transition
属性在元素悬停时为 transform
属性设置动画。例如,transition: transform 1s ease 0s;
。
要从左到右镜像透视效果,在右透视效果中将 rotateY()
值改为负数。例如,使用 transform: perspective(1500px) rotateY(-15deg);
。
示例 HTML:
<div class="card-container">
<div class="image-card perspective-left"></div>
<div class="image-card perspective-right"></div>
</div>
示例 CSS:
.image-card {
display: inline-block;
box-sizing: border-box;
margin: 1rem;
width: 240px;
height: 320px;
padding: 8px;
border-radius: 1rem;
background: url("https://picsum.photos/id/1049/240/320");
box-shadow: rgba(0, 0, 0, 0.25) 0px 25px 50px -12px;
}
.perspective-left {
transform: perspective(1500px) rotateY(15deg);
transition: transform 1s ease 0s;
}
.perspective-left:hover {
transform: perspective(3000px) rotateY(5deg);
}
.perspective-right {
transform: perspective(1500px) rotateY(-15deg);
transition: transform 1s ease 0s;
}
.perspective-right:hover {
transform: perspective(3000px) rotateY(-5deg);
}
请点击右下角的“Go Live”以在端口 8080 上运行网络服务。然后,你可以刷新“Web 8080”标签页来预览网页。
恭喜你!你已经完成了“悬停时的透视变换”实验。你可以在 LabEx 中练习更多实验来提升你的技能。