CSS旋转立方体

最新推荐文章于 2024-10-08 17:48:41 发布

玛丽大

最新推荐文章于 2024-10-08 17:48:41 发布

阅读量105

点赞数

文章标签： HTML5 CSS3 前端

本文链接：https://blog.csdn.net/qq_36937220/article/details/100849783

版权

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>动画立方体</title>
	<style type="text/css">
		.cube{
			width: 100px;
			height: 100px;
			margin:50px;
			-webkit-transform-style: preserve-3d;
			transform-style: preserve-3d;
            animation:rotate 5s infinite alternate;
		}
		.cube > div{
			width:100%;
			height: 100%;
			background:rgba(255,255,255,.1);
			box-shadow: 0 0 5px inset rgba(0,0,0,.2);
			color: gray;
			text-align: center;
			line-height: 100px;
			backface-visibility: visible;
			position:absolute;
		}
		.cube .front{
			/*background-color:red;*/
			-webkit-transform:translateZ(50px);
			transform:translateZ(50px);
		}
		.cube .back{
			/*background-color:orange;*/
			-webkit-transform: rotateX(180deg) translateZ(50px);
			transform: rotateX(180deg) translateZ(50px);
		}
		.cube .left{
			/*background-color:yellow;*/
			-webkit-transform:rotateY(90deg) translateZ(50px);
			transform: rotateY(90deg) translateZ(50px);
		}
		.cube .right{
			/*background-color:green;*/
			-webkit-transform:  rotateY(-90deg) translateZ(50px);
			transform: rotateY(-90deg) translateZ(50px);
		}
		.cube .top{
			/*background-color:blue;*/
			-webkit-transform: rotateX(90deg) translateZ(50px);
			transform: rotateX(90deg) translateZ(50px);
		}
		.cube .bottom{
			/*background-color:cyan;*/
			-webkit-transform:  rotateX(-90deg) translateZ(50px);
			transform: rotateX(-90deg) translateZ(50px);
		}
		@keyframes rotate{
			from {transform:rotateY(0deg) rotateX(0deg);}
           	to{transform:rotateY(360deg) rotateX(360deg);}
		}
	</style>
</head>
<body>
	<div class="cube">
		<div class="front">1</div>
		<div class="back">2</div>
		<div class="left">3</div>
		<div class="right">4</div>
		<div class="top">5</div>
		<div class="bottom">6</div>
	</div>
</body>
</html>