436day（立方体（css3））

最新推荐文章于 2021-04-11 13:52:40 发布

原创最新推荐文章于 2021-04-11 13:52:40 发布 · 157 阅读

0 ·

CC 4.0 BY-SA版权

《2018年12月14日》【连续436天】

标题：立方体（css3）；

内容：

css3还是挺有意思的，不用 js就可以实现不少功能；

* {
			margin: 0;
			padding: 0;
		}
		.box {
			width: 200px;
			height: 200px;
			margin: 100px auto;
			position: relative;
			transform: rotate3d(1,1,0,-30deg);		
			transform-style: preserve-3d; 
			/*保留3D*/
			animation: rotation 10s linear infinite;
		}
		.box div {
			width: 200px;
			height: 200px;
			position: absolute;
			opacity: 0.5;
		}
		.front {
			background-color: red;
			transform: translateZ(100px);
		}
		.back {
			background-color: green;
			transform: translateZ(-100px);
		}
		.left {
			background-color: blue;
			transform: translateX(-100px) rotateY(-90deg);
		}
		.right {
			background-color: pink;
			transform: translateX(100px) rotateY(90deg);
		}
		.top {
			background-color: purple;
			transform: translateY(-100px) rotateX(90deg);
		}
		.bottom {
			background-color: orange;
			transform: translateY(100px) rotateX(-90deg);
		}
		@keyframes rotation {
			0% {
				transform: rotate3d(1,1,0,-30deg);	
			}
			100% {
				transform: rotate3d(1,1,0,330deg);	
			}
		}

<div class="box">
		<div class="front">front</div>
		<div class="back">back</div>
		<div class="left">left</div>
		<div class="right">right</div>
		<div class="top">top</div>
		<div class="bottom">bottom</div>
	</div>