2D与3D转换 2-13编程

首页课程实战体系课手记专栏慕课教程

2D与3D转换 2-13编程

来源：2-13 编程练习

天_嘿嘿

2021-10-26 17:18:39

请展示完整版的编码，参考一下，自己做的太乱了

写回答

1回答

好帮手慕然然

2021-10-26

同学你好，这道题的完整代码如下，代码中带有注释，同学可以参考：

<!DOCTYPE HTML>
<html>

	<head>
		<meta charset="utf-8">
		<title>2-3</title>
		<style type="text/css">
		


			/* 国旗背景 */
			.vn-flag {
				width: 600px;
				height: 400px;
				background-color: rgb(218, 37, 29);
				position: relative;
				margin: 0 auto;
			}
			
								
			/* 绘制五角星 */
			.vn-flag .stars {
				position: absolute;
				left: 90px;
				top: 120px;
				border: 30px solid transparent;
				border-top: 20px solid yellow;
				transform: scale(1.8);
			}
			.vn-flag .stars::before {
				content: "";
				position: absolute;
				left: -44px;
				top: -30px;
				border: 30px solid transparent;
				border-top: 20px solid yellow;
				transform: rotate(70deg);
			}
			.vn-flag .stars::after {
				content: "";
				position: absolute;
				left: -18px;
				top: -30px;
				border: 30px solid transparent;
				border-top: 20px solid yellow;
				transform: rotate(292deg);
			}
			
			/* 调整第一个五角星的位置和大小 */
			.vn-flag .one{
				transform: scale(1.8);
			}
			
			/* 调整第二个五角星的位置和大小 */
			.vn-flag .two{
				left: 180px;
				top: 30px;
				transform: rotate(25deg) scale(0.6);
			}
			/* 调整第三个五角星的位置和大小 */
			.vn-flag .three{
				left: 220px;
				top: 80px;
				transform: rotate(45deg) scale(0.6);
			}
			/* 调整第四个五角星的位置和大小 */
			.vn-flag .four{
				left: 220px;
				top: 130px;
				transform: rotate(65deg) scale(0.6);
			}
			/* 调整第五个五角星的位置和大小 */
			.vn-flag .five{
				left: 180px;
				top: 180px;
				transform: rotate(85deg) scale(0.6);
			}
			
		</style>
	</head>

	<body>
		
		<div class="vn-flag">
			<!-- 大五角星 -->
			<div class="stars one"></div>
			<!-- 四个小五角星 -->
			<div class="stars two"></div>
			<div class="stars three"></div>
			<div class="stars four"></div>
			<div class="stars five"></div>
		</div>
		
	</body>

</html>

祝学习愉快！

0 学习 · 17877 问题

查看课程

相似问题

rotateX这个不是3d转换吗，既然考2d转换为什么这两个选项是正确的？

回答 2

2-11 3D旋转的一些问题，请老师帮忙解答一下，谢谢

回答 1

2-13 编程练习提交

回答 1

打开慕课网App查看更多内容