2021-11-22 transform属性的用法和示例,使用transform属性实现扑克牌的正反面翻转,transition属性的用法和示例,

本文链接：https://blog.youkuaiyun.com/rowlet/article/details/121479720

本文详细介绍了CSS3的transform属性，包括translate、scale、rotate和skew的用法，并给出了点击翻转扑克牌正反面的示例。同时，文章还探讨了transition属性的应用，解释了如何设置过渡效果、过渡时间、时序函数和延迟时间，并提供了实际的代码示例和优化技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

零.transform的用法

transform属性是CSS3新增属性,可用于div的移动,放大,缩放,旋转

常见属性值

1.属性值translate:转换

translate(x,y) 定义 2D 转换。
translate3d(x,y,z) 定义 3D 转换。
translateX(x) 定义转换，只是用 X 轴的值。
translateY(y) 定义转换，只是用 Y 轴的值。
translateZ(z) 定义 3D 转换，只是用 Z 轴的值。

2.属性值scale:缩放

scale(x[,y]?) 定义 2D 缩放转换。
scale3d(x,y,z) 定义 3D 缩放转换。
scaleX(x) 通过设置 X 轴的值来定义缩放转换。
scaleY(y) 通过设置 Y 轴的值来定义缩放转换。
scaleZ(z) 通过设置 Z 轴的值来定义 3D 缩放转换。

3,属性值rotate:旋转

rotate(angle) 定义 2D 旋转，在参数中规定角度。
rotate3d(x,y,z,angle) 定义 3D 旋转。
rotateX(angle) 定义沿着 X 轴的 3D 旋转。
rotateY(angle) 定义沿着 Y 轴的 3D 旋转。
rotateZ(angle) 定义沿着 Z 轴的 3D 旋转。

4.属性值skew:倾斜

skew(x-angle,y-angle) 定义沿着 X 和 Y 轴的 2D 倾斜转换。
skewX(angle) 定义沿着 X 轴的 2D 倾斜转换。
skewY(angle) 定义沿着 Y 轴的 2D 倾斜转换。

一.示例:点击翻转扑克牌正反面

1. 注意事项

准备两张图片分别作为扑克牌的正面和反面
设置绝对定位让这两张图片重叠在一起
为上面的扑克牌背面设置backface-visibility:hidden,隐藏旋转的背面
为下面的扑克牌背面设置transform:rotateY(180deg),这样它翻转过来的时候不会显示为镜像
设置鼠标移入hover时两张图片的翻转,由于上面的设置,需注意两张图片的翻转角度不一样

2.完整代码

  <style>
    div{
      position: relative;
    }
    div>img{
      position: absolute;
      top:0;
      left:0;
      transition:all 3s;
    }
    #one{
      z-index:1;
	  backface-visibility: hidden;
    }
    #two{
      transform:rotateY(180deg);
    }
    div:hover #one{
      transform: rotateY(180deg);
    }
    div:hover #two{
      transform:rotateY(360deg);
    }
  </style>
<body>
  <div>
    <img src="./back.png" id="one">
    <img src="./front.png" id="two">
  </div>
</body>

3.知识点

3.1.transition属性用于设置元素的过渡效果

属性值:

transition-property 指定CSS属性的name，transition效果
transition-duration transition效果需要指定多少秒或毫秒才能完成
transition-timing-function 指定transition效果的转速曲线
transition-delay 定义transition效果开始的时候

语法:

transition: property duration timing-function delay;

示例:

div
{
	width:100px;
	transition:width 2s;
}
div:hover
{
	width:300px;
}

3.2.div:hover #one还是div #one:hover?

前者

二.改进:在js中调用元素的transform属性

1.css样式不变,除了hover部分

<body>
	<div>
		<img src="./back.png" id="one">
		<img src="./front.png" id="two">
	</div>
</body>
<script>
	document.querySelector("div").onclick=function(){
		var t=setTimeout(()=>{
			document.querySelector("#one").style.transform="rotateY(180deg)";
			document.querySelector("#two").style.transform="rotateY(360deg)";
		},50);
	}
</script>

2.完整代码

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		div{
			position: relative;
		}
		img{
			position: absolute;
			top:0;
			left:0;
			transition:all 2s;
		}
		#one{
			z-index:1;
			backface-visibility: hidden;
		}
		#two{
			transform:rotateY(180deg);
		}

		/* div:hover #one{
			transform: rotateY(180deg);;
		}
		div:hover #two{
			transform: rotateY(360deg);;
		} */
	</style>
</head>
<body>
	<div>
		<img src="./back.png" id="one">
		<img src="./front.png" id="two">
	</div>
</body>
<script>
	document.querySelector("div").onclick=function(){
		var t=setTimeout(()=>{
			document.querySelector("#one").style.transform="rotateY(180deg)";
			document.querySelector("#two").style.transform="rotateY(360deg)";
		},50);
	}
</script>
</html>

3.图片资源

back.png

在这里插入图片描述

front.png

在这里插入图片描述

三.改进:能不能不分别对两个子元素设置hover,而是直接作用于它们的父元素

答:可以,但是要对父元素进行设置,否则翻牌时会造成左右位移

方法一:将它从块元素转化成行内块元素,这样它不会占满一行,翻转时不会离开当前位置
方法二:把这个父元素放在页面水平居中位置

示例

html

  <div class="card">
    <div class="front">
      <img src="./img/1.png" alt=''>
    </div>
    <div class="back">
      <img src='./img/back.png' alt=''>
    </div>
  </div>

.card{
     width: 250px;
     height: 350px;
     display:inline-block;/*设置为行内块元素*/
     backface-visibility: hidden;/*隐藏背面*/
     position: relative;/*子绝父相*/
     transition:transform 1s;/*transition也设置在.card中(此处可以指定transform代替all)*/
   }
   .card:hover{
     transform: rotateY(180deg);
   }
   .front,.back{
     position: absolute;
     top:0;
     left:0;
     background-size: 250px 350px;
   }
   .front{
     transform: rotateY(-180deg);
   }