html+ css 做一个旋转立方体

努力的编程的小白1

已于 2022-03-24 23:39:33 修改

阅读量427

点赞数

分类专栏：前端文章标签：前端 css html

于 2022-03-24 23:39:04 首次发布

本文链接：https://blog.csdn.net/m0_58975873/article/details/123724771

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	
	<style> 
	   *{
		   	margin: 0;
		   	padding: 0;
	   }
	   
	   .box{
		   	width: 600px;
		   	height: 600px;
		   	border: 5px solid gray;
		   	margin: 0 auto;
		   	position: relative;
		   	margin-top: 200px;
		   	transform-style: preserve-3d;  /*设置为3D效果*/
		   	animation: run 5s linear infinite;  /* 不停止播放  */
			 
		   	
	   }
	   
	   
	   @keyframes run{  /* animation动画效果   */
	   	 0%{
	   	 	transform: rotateY(30deg) rotateX(90deg);
	   	 }
	   	 
	   	 50%{
	   	 	transform: rotateY(90deg) rotateX(360deg);
	   	 }
	   	 
	   	 100%{
	   	 	transform:rotateY(360deg) rotateX(90deg);
	   	 }
	   }
	   
	   .box:hover{
	   	animation-play-state: paused;
	   }
	   
	   .box div{
		   	width: 200px;
		   	height: 200px;
		   	position: absolute;
		   	left: 50%;
		   	top: 50%;
		   	margin-left: -100px;
		   	margin-top: -100px;
		   	text-align: center;
		   	font-size: 50px;
		   	line-height: 200px;
		   	color: white;
	
		
	  
	   }
	   
	   .box div:nth-child(1){
	   	   background: gray;
	   	   transform: tranlateZ(100px);
	   	  
	   }
	   
	     .box div:nth-child(1){
	    	background: gray;
	    	transform: translateZ(100px);
	    }
	   
		.box div:nth-child(2){
		   	background: saddlebrown;
		   	transform: translateX(-100px) rotateY(-90deg);  /* 位置加旋转  */
		   
	   }
	   
	   .box div:nth-child(3){
		   	background: blue;
		    transform: translateY(-100px) rotateX(90deg);  
	   }
	   
	   .box div:nth-child(4){
		   	background: yellow;
		   	transform:translateY(100px) rotateX(-90deg);
		   
	   }
	   
	   .box div:nth-child(5){
		   	background: pink;
		   	transform: translateX(100px) rotateY(90deg);
		   
	   }
	   
	   .box div:nth-child(6){
	   	   background: green;
	       transform: translateZ(-100px);
	   	
	   }
	   
	   img{
	   	width: 200px;
	   	height: 200px;
	   }
	    
	
	
	</style>
	
	
	
	<body>
		<div class="box">
			<div> <img src="../img/1.jpg"> </div>
	     	<div> <img src="../img/2.jpg"> </div>
			<div> <img src="../img/3.jpg"> </div>
			<div> <img src="../img/4.jpg"> </div>
			<div> <img src="../img/5.jpg"> </div>
			<div> <img src="../img/6.jpg"> </div>
		</div>
	</body>
</html>

努力的编程的小白1

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html+ css 做一个旋转立方体

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <style> *{ margin: 0; padding: 0; } .box{ width: 600px; height: 600px; bo.
复制链接

扫一扫