15-transform3dDemo2.html（3D变形案例2）

最新推荐文章于 2024-09-23 14:37:01 发布

原创最新推荐文章于 2024-09-23 14:37:01 发布 · 171 阅读

0 ·

CC 4.0 BY-SA版权

前端专栏收录该内容

26 篇文章

订阅专栏

本文详细介绍了使用HTML和CSS实现的3D变形效果，通过设置透视、旋转和过渡等属性，展示了一个精美的3D翻转动画案例。案例中包含狮子图片及文字描述，鼠标悬停时将触发3D翻转变换。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>3D变形案例2</title>

<style type="text/css">
	* {
		margin: 0;
		padding: 0;
	}

	.wrap {
		width: 310px;
		height: 100px;
		margin: 100px auto;
		perspective: 2000px;
	}
	
	.item {
		width: 100%;
		height: 100%;
		position: relative;
		transform-style: preserve-3d;
		transition: 1s;
	}
	
	.item img {
		position: absolute;
		border-radius: 5px;
		width: 310px;
		height: 100px;
		transform: translateZ(50px);
	}
	
	.item span {
		width: 290px;
		height: 80px;
		padding: 10px;
		position: absolute;
		left: 0;
		top: 0;
		background: #ccc;
		border-radius: 5px;
		transform: rotateX(-90deg) translateZ(50px);
		/* transform-origin: bottom; */
	}
	
	.item:hover {
		transform: rotateX(90deg);
	}
	
	
	
</style>


</head>
<body>
	<div class="wrap">
		<div class="item">
			<img alt="" src="img/狮子.jpg" />
			<span>This is lion!This is lion!This is lion!This is lion!This is lion!This is lion!This is lion!
				This is lion!This is lion!This is lion!This is lion!This is lion!</span>
		</div>
	</div>
</body>
</html>