逆战班：CSS3制作正方体

最新推荐文章于 2024-09-12 15:09:42 发布

mushaluoluo

最新推荐文章于 2024-09-12 15:09:42 发布

阅读量191

点赞数

文章标签： html

本文链接：https://blog.csdn.net/mushaluoluo/article/details/105016702

版权

本文通过三步教你如何使用CSS3创建一个正方体：首先在body中创建一个大盒子及六个子盒子表示正方体的各个面；接着，通过设置3D空间、景深、旋转和过渡效果，让正方体具有立体感；最后，调整各面的颜色和位置，完成正方体的造型。

摘要由CSDN通过智能技术生成

第一步：我们先在body里写出一个装着整个正方体的盒子，和六个分别装着正方体的每个面的盒子

<body>
		<div class="box">
			<div class="box1">上</div>
			<div class="box2">下</div>
			<div class="box3">左</div>
			<div class="box4">右</div>
			<div class="box5">前</div>
			<div class="box6">后</div>
		</div>
	</body>

第二步：我们在head的style里给body设置3D空间和景深效果，以及给装整个正方体的大盒子设置宽高、3D空间、外边距、相对定位且让它绕Y轴旋转60度和transition的过渡时间、延迟时间(这是为了我们更方便观察正方体)

        <style type="text/css">
			body{
				transform-style:preserve-3d;/*设置3D空间*/
				perspective:900px;/*设置景深*/
			}
			.box{
				transform:rotateY(60deg);/*正方体旋转60度*/
				width:300px;
				height:300px;
				margin:300px;
				position:relative;/*设置相对定位*/
				transform-style:preserve-3d;
				transition-delay:1.5s;/*设置动画延迟时间*/
				transition-duration:4s;/*设置动画过渡时间*/
			}
        </style>

第三步：我们继续在style里面给正方体的六个面在style中设置颜色，以及把每个面旋转或平移到相对应的位置来形成正方体

        <style type="text/css">
			body{
				transform-style:preserve-3d;/*设置3D空间*/
				perspective:900px;/*设置景深*/
			}
			.box{
				transform:rotateY(60deg);/*正方体旋转60度*/
				width:300px;
				height:300px;
				margin:300px;
				position:relative;/*设置相对定位*/
				transform-style:preserve-3d;
				transition-delay:1.5s;/*设置动画延迟时间*/
				transition-duration:4s;/*设置动画过渡时间*/
			}
			.box div{
				width:300px;
				height:300px;
				position:absolute;/*设置绝对定位*/
				transition:1.5s;/*设置过渡时间*/
				opacity:0.5;/*设置透明度*/
				color:red;/*字体颜色*/
				font-size:30px;/*字体大小*/
				font-weight:bold;/*加粗*/
				line-height:300px;/*字体上下居中*/
				text-align:center;/*字体左右居中*/
				background:pink;/*背景色*/
			}
			.box:hover{
				transform:rotateY(360deg);/*鼠标滑过使正方体旋转360度*/
			}
			.box:hover .box1{
				background:skyblue;
				transform:translateY(-150px) rotateX(90deg);
			}/*使其成为正方体上方的面*/
			.box:hover .box2{
				background:skyblue;
				transform:translateY(150px) rotateX(90deg);
			}/*使其成为正方体下方的面*/
			.box:hover .box3{
				background:mediumpurple;
				transform:translateX(-150px) rotateY(-90deg);
			}/*使其成为正方体左方的面*/
			.box:hover .box4{
				background:mediumpurple;
				transform:translateX(150px) rotateY(90deg);
			}/*使其成为正方体右方的面*/
			.box:hover .box5{
				background:greenyellow;
				transform:translateZ(150px);
			}/*使其成为正方体前方的面*/
			.box:hover .box6{
				background:greenyellow;
				transform:translateZ(-150px);
			}/*使其成为正方体后方的面*/
        </style>