Css3D盒子

最新推荐文章于 2023-10-06 10:55:50 发布

just_do_yet

最新推荐文章于 2023-10-06 10:55:50 发布

阅读量269

点赞数

文章标签： css

本文链接：https://blog.csdn.net/just_do_yet/article/details/120630605

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
		
			body {
				/* 父元素开启透视 */
				perspective: 500px;
			}

			.box {
				position: relative;
				margin: 150px auto;
				width: 200px;
				height: 200px;
				/* 设置3D空间 */
				transform-style: preserve-3d;
				/* transition: all 5s; */
				transform: rotate3d(1,1,1,20deg) rotateY(30deg);
			}


			.box div {
				position: absolute;
				width: 100%;
				height: 100%;
				text-align: center;
				line-height: 200px;
				font-size: 50px;
				color: white;
			}

			/* 先找好盒子的中心点，再调整每个面的位置 */
			.front {
				background-color: brown;
				opacity: 0.8;
				transform:translateZ(100px);
			}

			.back {
				background-color: red;
				opacity: 0.8;
				transform:translateZ(-100px);
			}

			.top {
				background-color: gold;
				opacity: 0.8;
				/* 先位移后旋转 */
				transform:translateY(-50%)  rotateX(90deg);
			}

			.bottom {
				background-color: blue;
				opacity: 0.8;
				transform:translateY(50%)  rotateX(-90deg);
			}

			.left {
				background-color: olivedrab;
				opacity: 0.8;
				transform: translateX(-50%) rotateY(-90deg);
			}

			.right {
				background-color: palegreen;
				opacity: 0.8;
				transform: translateX(50%) rotateY(90deg);
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="front"></div>
			<div class="back"></div>
			<div class="top"></div>
			<div class="bottom"></div>
			<div class="left"></div>
			<div class="right"></div>
		</div>
	</body>
</html>

just_do_yet

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Css3D盒子

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> body { /* 父元素开启透视 */ perspective: 500px; } .box { position: relative; margin: 1...
复制链接

扫一扫

Css3D盒子

“相关推荐”对你有帮助么？