立体旋转

最新推荐文章于 2024-09-23 02:17:30 发布

江湖郎中，小严头儿

最新推荐文章于 2024-09-23 02:17:30 发布

阅读量103

点赞数

文章标签： CSS

本文链接：https://blog.youkuaiyun.com/weixin_44978975/article/details/95230187

版权

博客提及了 CSS 的修改版，但未给出更多详细信息。CSS 是前端开发中用于样式设计的重要技术，修改版可能带来新特性或优化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<html>

	<head>

		<style>
			.lifangti {
				transform-style: preserve-3d;
				transform: rotateX(45deg) rotateZ(45deg);
				transform-origin: 50px 50px;
				top: 50%;
				left: 50%;
				margin: -100px 0 0 -50px;
				position: absolute;
				animation: xuanzhuan 5s infinite ease;
			}
			
			.lifangti>.bgabox {
				width: 100px;
				height: 100px;
				position: absolute;
				opacity: 0.3;
				/*透明*/
			}
			
			.leftm {
				background-color: #ff6a00;
				transform: rotateY(90deg) translateZ(-50PX);
				-moz-transform: rotateY(90deg) translateZ(-50PX);
				-webkit-transform: rotateY(90deg) translateZ(-50PX);
			}
			
			.rightm {
				background-color: #6faed9;
				transform: rotateY(90deg) translateZ(50px);
				-moz-transform: rotateY(90deg) translateZ(50px);
				-webkit-transform: rotateY(90deg) translateZ(50px);
			}
			
			.topm {
				transform: rotateX(90deg) translateZ(50px);
				-moz-transform: rotateX(90deg) translateZ(50px);
				-webkit-transform: rotateX(90deg) translateZ(50px);
				background-color: #ff0000;
				opacity: 1;
			}
			
			.bottomm {
				transform: rotateX(90deg) translateZ(-50px);
				-moz-transform: rotateX(90deg) translateZ(-50px);
				-webkit-transform: rotateX(90deg) translateZ(-50px);
				background-color: #52d538;
			}
			
			.beform {
				background-color: #b12d9e;
				transform: translateZ(50px);
				-moz-transform: translateZ(50px);
				-webkit-transform: translateZ(50px);
			}
			
			.afterm {
				background-color: #138fc6;
				transform: translateZ(-50px);
				-moz-transform: translateZ(-50px);
				-webkit-transform: translateZ(-50px);
			}
			
			@keyframes xuanzhuan {
				from {
					transform: rotateX(0deg) rotateY(0deg);
				}
				to {
					transform: rotateX(720deg) rotateY(720deg);
				}
			}
			
			.lifangtimin {
				transform-origin: 25px 25px;
				transform-style: preserve-3d;
				top: 50%;
				margin: 25px 0 0 25px;
				animation: xuanzhuanm 5s infinite ease;
			}
			
			.lifangtimin>div {
				width: 50px;
				height: 50px;
				position: absolute;
				opacity: 0.8;
			}
			
			.leftmm {
				background-color: #ff6a00;
				transform: rotateY(90deg) translateZ(-25px);
				-webkit-transform: rotateY(90deg) translateZ(-25px);
				-moz-transform: rotateY(90deg) translateZ(-25px);
			}
			
			.rightmm {
				background-color: #6faed9;
				transform: rotateY(90deg) translateZ(25px);
				-webkit-transform: rotateY(90deg) translateZ(25px);
				-moz-transform: rotateY(90deg) translateZ(25px);
			}
			
			.topmm {
				transform: rotateX(90deg) translateZ(25px);
				-webkit-transform: rotateX(90deg) translateZ(25px);
				-moz-transform: rotateX(90deg) translateZ(25px);
				background-color: #ff0000;
				opacity: 1;
			}
			
			.bottommm {
				transform: rotateX(90deg) translateZ(-25px);
				-webkit-transform: rotateX(90deg) translateZ(-25px);
				-moz-transform: rotateX(90deg) translateZ(-25px);
				background-color: #52d538;
			}
			
			.beformm {
				background-color: #b12d9e;
				transform: translateZ(25px);
				-webkit-transform: translateZ(25px);
				-moz-transform: translateZ(25px);
			}
			
			.aftermm {
				background-color: #138fc6;
				transform: translateZ(-25px);
				-webkit-transform: translateZ(-25px);
				-moz-transform: translateZ(-25px);
			}
			
			@keyframes xuanzhuanm {
				from {
					transform: rotateY(0deg) rotateX(0deg);
				}
				to {
					transform: rotateY(-360deg) rotateX(360deg);
				}
			}
		</style>
	</head>

	<body>

		<div class="lifangti">

			<div class="beform bgabox"></div>
			<div class="afterm bgabox"></div>
			<div class="leftm bgabox"></div>
			<div class="rightm bgabox"></div>
			<div class="topm bgabox"></div>
			<div class="bottomm bgabox"></div>

			<div class="lifangtimin">
				<div class="beformm"></div>
				<div class="aftermm"></div>
				<div class="leftmm"></div>
				<div class="rightmm"></div>
				<div class="topmm"></div>
				<div class="bottommm"></div>
			</div>

		</div>

	</body>

</html>

修改版