【HTML+CSS】做一个简易的立体小模型

叁歲伎倆 2023-09-30 09:38 26阅读 0赞

学完css基础的朋友们赶紧给自己做个小玩具"奖励"一下自己吧

学习的过程中一定要记得多奖励自己

废话不多说直接撸代码

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<style type="text/css">
    			*{
    				margin: 0;
    				padding: 0;
    			}
    			.boss{
    				width: 200px;
    				height: 200px;
    				/* border: 1px solid #000; */
    				margin: 200px auto;
    				position: relative;
    				transform-style: preserve-3d;
    				transition: 6s linear;
    			}
    			.boss:hover{
    				transform: rotate3d(1,1,1,360deg);
    			}
    			.boss div{
    				width: 200px;
    				height: 200px;
    				position: absolute;
    				left: 0;
    				top: 0;
    				font-size: 40px;
    				text-align: center;
    				line-height: 200px;
    				font-weight: bold;
    				color: #fff;
    				opacity: 0.7;
    			}
    			.boss div:nth-child(1){
    				background: cornflowerblue;
    				transform: translateX(-100px) rotateY(-90deg);
    			}
    			.boss div:nth-child(2){
    				background: green;
    				transform: translateX(100px) rotateY(90deg);
    			}
    			.boss div:nth-child(3){
    				background: purple;
    				transform: translateY(-100px) rotateX(90deg);
    			}
    			.boss div:nth-child(4){
    				background: yellow;
    				transform: translateY(100px) rotateX(-90deg);
    			}
    			.boss div:nth-child(5){
    				background: skyblue;
    				transform: translateZ(-100px) rotateY(180deg);
    			}
    			.boss div:nth-child(6){
    				background:red;
    				transform: translateZ(100px);
    			}
    		</style>
    	</head>
    	<body>
    		<div class="boss">
    			<div>1</div>
    			<div>2</div>
    			<div>3</div>
    			<div>4</div>
    			<div>5</div>
    			<div>6</div>
    		</div>
    	</body>
    </html>

效果图

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5oeS576K576KLmphdmE_size_20_color_FFFFFF_t_70_g_se_x_16][]

[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5oeS576K576KLmphdmE_size_20_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/f4b140ecc04f4674b8af4e495983bc21.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5oeS576K576KLmphdmE=,size_20,color_FFFFFF,t_70,g_se,x_16