学习探索-3D分割图片效果

最新推荐文章于 2024-07-11 17:26:33 发布

miao_zz

最新推荐文章于 2024-07-11 17:26:33 发布

阅读量188

点赞数

分类专栏： css 学习文章标签：学习 3d css

本文链接：https://blog.csdn.net/qq_37117408/article/details/125835118

版权

css 同时被 2 个专栏收录

16 篇文章 0 订阅

订阅专栏

学习

15 篇文章 0 订阅

订阅专栏

3D分割图片效果

- 效果示例图
- 代码示例

效果示例图

在这里插入图片描述
鼠标移动上去恢复原样图

代码示例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>3D分割图片效果</title>
		<style type="text/css">
			* {
				padding: 0px;
				margin: 0px;
				box-sizing: border-box;
				-webkit-box-sizing: border-box;
			}

			.partition-block {
				width: 400px;
				height: 200px;
				margin: 60px auto;
				position: relative;
				/* 设置视距 */
				perspective: 50px;
			}

			.partition-items {
				/* 切割成四分，每份占四分之一 */
				width: 50%;
				height: 50%;
				position: absolute;
				background-image: url("img/13.jpg");
				/* 设置图片的大小和盒子的大小一样，background-size: 400px 200px; */
				background-size: 200% 200%;
				background-repeat: no-repeat;
				transition: all 0.3s;
			}

			.partition-items-1 {
				top: -10px;
				left: -10px;
				background-position: top left;
				transform: rotate3d(1, -1, -1, 3deg);
			}

			.partition-items-2 {
				top: -10px;
				right: -10px;
				background-position: top right;
				transform: rotate3d(1, 1, 1, 3deg);
			}

			.partition-items-3 {
				bottom: -10px;
				right: -10px;
				background-position: bottom right;
				transform: rotate3d(-1, 1, 1, 3deg);
			}

			.partition-items-4 {
				bottom: -10px;
				left: -10px;
				background-position: bottom left;
				transform: rotate3d(-1, -1, -1, 3deg);
			}

			.partition-block:hover>.partition-items-1 {
				top: 0px;
				left: 0px;
				background-position: top left;
				transform: rotate3d(0, 0, 0, 0deg);
			}

			.partition-block:hover>.partition-items-2 {
				top: 0px;
				right: 0px;
				background-position: top right;
				transform: rotate3d(0, 0, 0, 0deg);
			}

			.partition-block:hover>.partition-items-3 {
				bottom: 0px;
				right: 0px;
				background-position: bottom right;
				transform: rotate3d(0, 0, 0, 0deg);
			}

			.partition-block:hover>.partition-items-4 {
				bottom: 0px;
				left: 0px;
				background-position: bottom left;
				transform: rotate3d(0, 0, 0, 0deg);
			}
		</style>
	</head>
	<body>
		<div class="partition-block">
			<div class="partition-items partition-items-1"></div>
			<div class="partition-items partition-items-2"></div>
			<div class="partition-items partition-items-3"></div>
			<div class="partition-items partition-items-4"></div>
		</div>
	</body>
</html>