📌  相关文章
📜  CSS |旋转Y()函数(1)

📅  最后修改于: 2023-12-03 15:00:07.088000             🧑  作者: Mango

CSS | 旋转Y()函数

CSS中的旋转Y()函数可以将元素绕Y轴旋转一定的角度，实现元素的翻转效果，是CSS 3D转换中常用的函数之一。

语法
transform: rotateY(angle);

其中，angle为旋转的角度，可带单位（deg, rad, grad, turn）或无单位（默认为deg）。

注意事项

  • 旋转Y函数只在3D空间中有效，需要使用perspective属性指定透视效果。

  • 可以通过transition属性将翻转效果变得更加平滑过渡。

  • 旋转Y函数只能对block元素进行翻转，inline元素不支持该函数。

实例

以下是一个简单的实例，实现了一个元素的翻转效果。

<!DOCTYPE html>
<html>
<head>
	<title>旋转Y函数实例</title>
	<style>
		.container {
			perspective: 800px;
			height: 200px;
		}
		.card {
			width: 200px;
			height: 200px;
			background-color: blue;
			transform-style: preserve-3d;
			transition: transform 1s;
		}
		.card:hover {
			transform: rotateY(180deg);
		}
		.front, .back {
			position: absolute;
			width: 100%;
			height: 100%;
			backface-visibility: hidden;
		}
		.front {
			background-color: red;
			transform: rotateY(0);
		}
		.back {
			background-color: green;
			transform: rotateY(180deg);
		}
	</style>
</head>
<body>
	<div class="container">
		<div class="card">
			<div class="front">
				<p>前面</p>
			</div>
			<div class="back">
				<p>背面</p>
			</div>
		</div>
	</div>
</body>
</html>
参考链接