14-transform3dDemo1.html（3D变形案例1）

最新推荐文章于 2021-07-04 20:52:57 发布

jamesge2010

最新推荐文章于 2021-07-04 20:52:57 发布

阅读量169

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/jamesge2010/article/details/104724934

版权

前端专栏收录该内容

25 篇文章 0 订阅

订阅专栏

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

<style type="text/css">
	* {
		margin: 0;
		padding: 0;
	}
	
	.warp {
		perspective: 2000px;
	}
	
	.wrap ul {
		width: 200px;
		height: 200px;
		margin: 100px auto;
		/* 生成相对定位的元素，相对于其正常位置进行定位。 */
		position: relative;
		transform-style: preserve-3d;
		animation: move 5s infinite linear both;
		transform-origin: 100px 100px -100px;
	}
	
	.wrap ul li {
		width: 196px;
		height: 196px;
		line-height: 196px;
		border: 2px solid #000;
		background: rgba(152,251,152, 0.5);
		font-size: 60px;
		color: #fff;
		list-style: none;
		text-align: center;
		/* 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。 */
		position: absolute;
		left: 0;
		top: 0;
	}
	
	/* 选择器匹配属于其父元素的第 N 个子元素 */
	.wrap ul li:nth-child(1) {
		top: -200px;
		transform: rotateX(90deg);
		transform-origin: bottom;
	}
	.wrap ul li:nth-child(2) {
		top: 200px;
		transform: rotateX(-90deg);
		transform-origin: top;
	}
	.wrap ul li:nth-child(3) {
		left: -200px;
		transform: rotateY(-90deg);
		transform-origin: right;
	}
	.wrap ul li:nth-child(4) {
		left: 200px;
		transform: rotateY(90deg);
		transform-origin: left;
	}
	.wrap ul li:nth-child(5) {
		transform: translateZ(-200px);
	}
	.wrap ul li:nth-child(6) {
		transform: translateZ(0);
	}
	
	@keyframes move {
		0% {
			transform: rotateX(0) rotateY(0);
		}
		100% {
			transform: rotateX(360deg) rotateY(360deg);
		}
	}
	
	

</style>
</head>
<body>
	<div class="wrap">
		<ul>
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
			<li>5</li>
			<li>6</li>
		</ul>
	</div>
</body>
</html>

jamesge2010

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
14-transform3dDemo1.html（3D变形案例1）

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>3D变形案例1</title><style type="text/css"> * { margin: 0; padding: 0; } .warp { perspect...
复制链接

扫一扫