css翻面效果

最新推荐文章于 2023-12-25 13:58:23 发布

原创最新推荐文章于 2023-12-25 13:58:23 发布 · 368 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css

笔记专栏收录该内容

20 篇文章

订阅专栏

本文介绍如何使用 CSS 实现图片的 3D 翻转效果，通过设置 perspective 定义透视距离，利用 transform-style 和 rotateY 实现翻转动画。适用于网页设计中增加互动元素。

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

css翻面效果

perspective 设置透视距离
transform-style flat | preserve-3d 设置盒子是否按3d空间显示
translateX、translateY、translateZ 设置三维移动
rotateX、rotateY、rotateZ 设置三维旋转
scaleX、scaleY、scaleZ 设置三维缩放

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="翻转图片.css">
	</head>
	<body>
		<div class="box">
			<img src="banner06.jpg" alt="图片">
		</div>
	</body>
</html>

.box{
	width: 500px;
	height: 300px;
	border: 3px solid bisque;
	margin: 50px auto;
	background-color: papayawhip;
	position: relative;
}
.box img{
	position: absolute;
	left: 0;
	top: 0;
	transform: perspective(800px) rotatey(0deg);
	transition: all 500ms ease;
}

.box:hover img{
	transform: perspective(800px) rotateY(180deg);
}