Jump to content
  • Hello visitors, welcome to the Hacker World Forum!

    Red Team 1949  (formerly CHT Attack and Defense Team) In this rapidly changing Internet era, we maintain our original intention and create the best community to jointly exchange network technologies. You can obtain hacker attack and defense skills and knowledge in the forum, or you can join our Telegram communication group to discuss and communicate in real time. All kinds of advertisements are prohibited in the forum. Please register as a registered user to check our usage and privacy policy. Thank you for your cooperation.

    TheHackerWorld Official

HTML5 纯CSS3实现正方体旋转3D效果

 Share


NedK7

Recommended Posts

 

实现效果:

?i=20201127184938505.gif

实现代码:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#aa{
				margin: 100px auto;
				width: 200px;
				height: 200px;
				transform-style: preserve-3d;
				position: relative;
				transform: rotateX(-15deg) rotateY(45deg);
				animation: name 6s linear 100ms infinite;
			}
			.bb{
				position: absolute;
				width: 100px;
				height: 100px;
				left: 0;
				right: 0;
				background-color: rgba(232,222,45,0.6);
			}
			.qian{
				transform: translateZ(50px);
				background-color: rgba(23,22,4,0.6);
			}
			.hou{
				transform: translateZ(-50px);
				background-color: rgba(23,122,56,0.6);
			}
			.zuo{
				transform: rotateY(270deg) translateZ(-50px);
				background-color: rgba(223,122,74,0.6);
				
			}
			.you{
				transform: rotateY(270deg) translateZ(50px);
				background-color: rgba(13,22,254,0.6);
			}
			.shang{
				transform: rotateX(270deg) translateZ(-50px);
				background-color: rgba(223,12,144,0.9);
			}
			.xia{
				transform: rotateX(270deg) translateZ(50px);
				background-color: rgba(23,252,144,0.6);
			}
			@keyframes name{
				from{ transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);}
				to{ transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);}
			}
		</style>
	</head>
	<body>
		<div id="aa">
			<div class="bb  qian"></div>
			<div class="bb  hou"></div>
			<div class="bb  zuo"></div>
			<div class="bb  you"></div>
			<div class="bb  shang"></div>
			<div class="bb  xia"></div>
		</div>
	</body>
</html>
Link to post
Link to comment
Share on other sites

 Share

discussion group

discussion group

    You don't have permission to chat.
    • Recently Browsing   0 members

      • No registered users viewing this page.
    ×
    ×
    • Create New...