3D转换-正方体

最新推荐文章于 2022-12-08 21:38:32 发布

「已注销」

最新推荐文章于 2022-12-08 21:38:32 发布

阅读量269

点赞数

分类专栏： web前端开发 css html 文章标签： css 3D转换正方体

本文链接：https://blog.csdn.net/weixin_44713430/article/details/100086512

版权

web前端开发同时被 3 个专栏收录

122 篇文章 0 订阅

订阅专栏

css

26 篇文章 0 订阅

订阅专栏

html

12 篇文章 0 订阅

订阅专栏

按顺序做上后下前左右

上 : x轴旋转90度 , z轴正向偏移100px
后 : x轴旋转180度 , z轴正向偏移100px
下 : x轴旋转270度 , z轴正向偏移100px
前 : x轴旋转360度 , z轴正向偏移100px
左 : x轴负向偏移100px , y轴旋转90度
右 : x轴正向偏移100px , y轴旋转90度

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Document</title>
	<style>
		* {
			padding: 0;
			width: 0;
		}
		div {
            position: relative;
			width: 200px;
            height: 200px;
		}
		ul {
			position: absolute;
			left: 400px;
			top: 200px;
			width: 200px;
			height: 200px;
			list-style: none;
            /* border: 1px solid #000;
            box-sizing: border-box; */
            transform: rotateY(0deg) rotateX(0deg);
            transform-style: preserve-3d;
		}
		li {
			position: absolute;
			left: 0;
			top: 0;
			width: 200px;
			height: 200px;
			font-size: 60px;
			line-height: 200px;
			text-align: center;
		}
		
		/* 核心代码 */
		li:nth-child(1) {
			background-color: rgb(163, 99, 99);
			transform: rotateX(90deg) translateZ(100px);
		}
		li:nth-child(2) {
			background-color: rgb(238, 217, 28);
			transform: rotateX(180deg) translateZ(100px);
		}
		li:nth-child(3) {
			background-color: rgb(233, 70, 151);
			transform: rotateX(270deg) translateZ(100px);
		}
		li:nth-child(4) {
			background-color: rgb(107, 47, 218);
			transform: rotateX(360deg) translateZ(100px);
		}
		li:nth-child(5) {
			background-color: rgb(29, 61, 240);
			transform: translateX(-100px) rotateY(90deg);
		}
		li:nth-child(6) {
			background-color: rgb(58, 228, 134);
			transform: translateX(100px) rotateY(90deg);
		}

	</style>
</head>

<body>
	<div>
		<ul>
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
			<li>5</li>
			<li>6</li>
		</ul>
	</div>
</body>

</html>

「已注销」

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
3D转换-正方体

按顺序做上后下前左右上 : x轴旋转90度 , z轴正向偏移100px后 : x轴旋转180度 , z轴正向偏移100px下 : x轴旋转270度 , z轴正向偏移100px前 : x轴旋转360度 , z轴正向偏移100px左 : x轴负向偏移100px , y轴旋转90度右 : x轴正向偏移100px , y轴旋转90度<!DOCTYPE html>&...
复制链接

扫一扫