旋转卡片是当您将鼠标悬停在卡片上时卡片会旋转一定程度的效果。当您将鼠标悬停在卡片上时,卡片上将显示信息、链接或图像。
在本文中,您将学习如何仅使用 HTML 和 CSS 在您的网站上制作旋转卡片。
分步实施:
第 1 步:卡片的 HTML 文件
HTML
GeeksForGeeks Rotating Card
HTML
GeeksForGeeks Rotating Card
第2步:使用CSS装饰卡片正面:我们在HTML部分构建了卡片第一面的结构。现在我们需要设计具有不同CSS属性的卡片,关键是使用CSS的transform属性将卡片旋转45度即 变换:旋转(45度) 。所以,现在在里面添加下面写的 CSS 代码 头 标签。
.card {
position: absolute;
width: 200px;
height: 200px;
display: inline-block;
border-radius: 10px;
padding: 15px 25px;
box-sizing: border-box;
cursor: pointer;
margin: 10px 15px;
transition: transform 0.5s;
background-position: right;
background-size: cover;
transform: rotate(45deg);
}
.GFG {
margin-top: 170px;
margin-left: 600px;
background-image: url(gfg.jpg);
}
.card:hover {
transform: translateY(-10px);
}
注意:您可以尽可能多地轮换您的卡片,具体取决于 变换:旋转(45度) ,背景图像在图像文件夹中 我们将使用 url()访问该图像,而此url()将获取已保存图像的地址。
示例:提供完整的 HTML 代码作为示例以帮助您。这个例子使用 变换:旋转(45度)属性来旋转卡片。
HTML
GeeksForGeeks Rotating Card
输出: