CSS3扑克牌2D旋转

￡神魔★判官ぃ 2024-04-18 16:59 9阅读 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 条评论，9人围观）

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

相关阅读

相关 CSS3扑克牌2D旋转

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

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

相关 CSS元素旋转3D显示

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

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

相关 css3 3D旋转特效

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

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

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

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

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

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

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

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

相关 css 实现3d旋转

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

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

相关 css-图片旋转木马3D效果

参考博客：[ 张鑫旭][Link 1] 我们先来看一下效果： ![70][] 还不错咯，这个主要是利用了css3里面的transform属性。简单介绍一下。

淡淡的烟草味﹌/ 2022年05月24日 13:08/ 0 赞/ 313 阅读

相关利用CSS3实现图片3D旋转

以下是本次所作的效果图 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4

古城微笑少年丶/ 2022年04月15日 01:08/ 0 赞/ 989 阅读

相关 css之3D旋转讲解

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

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

相关 css动画 3d旋转相册

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

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