CSS3扑克牌2D旋转

￡神魔★判官ぃ 2024-04-18 16:59 77阅读 0赞

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>扑克牌旋转</title>
    		<style>
    			*{
    				padding: 0;
    				margin: 0;
    				
    			}
    			.pk{
    				width: 152px;
    				margin: 300px auto;
    				position: relative;
    			}
    			.pk>img{
    				width: 152px;
    				height: 221;
    				position: absolute;
    				/* 旋转动画时间，旋转轴 */
    				transition: transform 1s ease;
    				/* 设置旋转轴位置 */
    				transform-origin: right top;
    			}
    			/* 图片旋转角度 */
    			.pk:hover > img:nth-of-type(1){
    				transform: rotate(60deg);
    			}
    			.pk:hover > img:nth-of-type(2){
    				transform: rotate(120deg);
    			}
    			.pk:hover > img:nth-of-type(3){
    				transform: rotate(180deg);
    			}
    			.pk:hover > img:nth-of-type(4){
    				transform: rotate(240deg);
    			}
    			.pk:hover > img:nth-of-type(5){
    				transform: rotate(300deg);
    			}
    			.pk:hover > img:nth-of-type(6){
    				transform: rotate(360deg);
    			}
    			/* 隐藏反面牌 */
    			.pk:hover > img:nth-of-type(7){
    				display: none;
    			}
    		</style>
    	</head>
    	<body>
    		<div class="pk">
    			<img src="img/pk1.png" alt="">
    			<img src="img/pk2.png" alt="">
    			<img src="img/pk1.png" alt="">
    			<img src="img/pk2.png" alt="">
    			<img src="img/pk1.png" alt="">
    			<img src="img/pk2.png" alt="">
    			<img src="img/pk3.png" alt="">
    		</div>
    	</body>
    </html>

发表评论取消回复

表情：

评论列表（有 0 条评论，77人围观）

还没有评论，来说两句吧...

相关阅读

相关 CSS3扑克牌2D旋转

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>扑...

￡神魔★判官ぃ/ 2024年04月18日 16:59/ 0 赞/ 78 阅读

相关【CSS3】CSS3 3D 转换 ④ ( 3D 旋转 rotate3d | rotate3d 语法 | rotate3d 自定义轴旋转 | 元素旋转方向 - 左手准则 | 代码示例 )

文章目录一、3D 旋转 rotate3d 1、rotate3d 语法 2、rotate3d 自定义轴旋转 3、元素旋转方向

一时失言乱红尘/ 2023年10月14日 19:11/ 0 赞/ 14 阅读

相关 3D旋转（CSS3）

3D旋转（CSS3） <!DOCTYPE html> <html lang="en"> <head> <meta cha

- 日理万妓/ 2023年10月03日 13:39/ 0 赞/ 34 阅读

相关 CSS元素旋转3D显示

![在这里插入图片描述][20210708114016462.png] html代码 <div class="box"> <div class="mai

落日映苍穹つ/ 2022年10月18日 13:00/ 0 赞/ 261 阅读

相关 css3 3D旋转特效

最近自己的网站正在制作，由于是个人网站，所以我傲娇的抛弃了IE，痛快的用起了css3和html5的诸多特效，然而问题亦随之而来。这篇文章的主要讲解在使用css3的3D旋转的时候

「爱情、让人受尽委屈。」/ 2022年07月16日 06:28/ 0 赞/ 379 阅读

相关 css3-2d变换旋转等属性

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8">

逃离我推掉我的手/ 2022年07月14日 00:42/ 0 赞/ 174 阅读

相关 css3 实现正方体3D旋转

源代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8

亦凉/ 2022年06月04日 00:06/ 0 赞/ 336 阅读

相关 css 实现3d旋转

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8">

柔光的暖阳◎/ 2022年05月28日 12:20/ 0 赞/ 338 阅读

相关 css之3D旋转讲解

3D动画 3d动画不同于2d动画，它是立体空间，三维的；目的：如何在网站中实现立体效果； 1.建立立体思维方式； 2.找到坐标原点，以及x,y,z轴； x

蔚落/ 2021年11月02日 07:28/ 0 赞/ 601 阅读

相关 css动画 3d旋转相册

思路: 重叠四个图片,然后设置行变点在中心的z轴往后的方向上,分别设置其他图片绕y轴的旋转角度,设置父容器的行变中心点和图片一样并设置透视和3d属

待我称王封你为后i/ 2021年07月25日 02:37/ 0 赞/ 549 阅读