纸牌翻转（html+css）

最新推荐文章于 2023-09-07 11:05:22 发布

LHNC

最新推荐文章于 2023-09-07 11:05:22 发布

阅读量2.1k

点赞数 6

分类专栏：网页之路文章标签： css html css3

本文链接：https://blog.csdn.net/llvyeriji/article/details/124810141

版权

网页之路专栏收录该内容

4 篇文章 0 订阅

订阅专栏

以下为 html 代码

<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>塔罗牌动画</title>
	<link rel="stylesheet" href="style/style.css">
</head>

<body>
	<div>
		<img class="ka01" src="images/ka01.png">
		<img class="ka02" src="images/ka02.png">
	</div>
</body>

</html>

以下为 css 代码

@charset "utf-8";

*{
    margin:0;
    padding:0;
    outline:none;
}

div{
    width:223px;
    height:333px;
    margin: 50px auto;
    position:relative;
    perspective: 400px;  /* 透视效果，增强立体感 */
}

img{
    position:absolute;
    top:0;
    left:0;
    backface-visibility: hidden;  /* 背面不可见 */
    transition:all 1s linear 0s;  /* 所有属性，持续1s，linear函数，过渡0s */
}

.ka02{
    transform:rotateY(180deg);    /* 先将图2放到背面（不可见）*/
}

div:hover .ka02{transform: rotateY(0deg);}     

div:hover .ka01{ transform: rotateY(-180deg);}   /* 鼠标悬浮时图1转到后面 */

LHNC

关注

6
点赞
踩
28

收藏

觉得还不错? 一键收藏
2
评论
纸牌翻转（html+css）

以下为 html 代码<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>塔罗牌动画</title> <link rel="stylesheet" href="style/style.css"></head><body> <div> <img class="ka01" src="i...
复制链接

扫一扫

专栏目录