3D之12旋转体

最新推荐文章于 2021-03-17 11:24:48 发布

置顶我就是咸鱼

最新推荐文章于 2021-03-17 11:24:48 发布

阅读量104

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/weixin_44808327/article/details/111073312

版权

js 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		.box{
			width: 200px;
			height: 300px;
			border: 3px solid red;
			margin:auto;
			position: absolute;
			top:0;
			bottom: 0;
			left: 0;
			right: 0;
			animation: round 2s linear infinite;
			transform-style:preserve-3d;/*声明3D*/
			transform: rotateX(-15deg)rotateY(-15deg);/*旋转z轴*/
		}
		.box div{
			width: 200px;
			height: 300px;
			position: absolute;
		}
		.box div:nth-child(1){
			background: red;
			transform:rotateY(30deg) translateZ(400px);
		}
		.box div:nth-child(2){
			background: yellow;
			transform:rotateY(-30deg) translateZ(400px);
		}
		.box div:nth-child(3){
			background: green;
			transform:rotateY(60deg) translateZ(400px);
		}
		.box div:nth-child(4){
			background: pink;
			transform:rotateY(-60deg) translateZ(400px);
		}
		.box div:nth-child(5){
			background: blue;
			transform:rotateY(90deg) translateZ(400px);
		}
		.box div:nth-child(6){
			background: black;
			transform:rotateY(-90deg) translateZ(400px);
		}
		.box div:nth-child(7){
			background: indigo;
			transform:rotateY(120deg) translateZ(400px);
		}
		.box div:nth-child(8){
			background: deepSkyBlue;
			transform:rotateY(-120deg) translateZ(400px);
		}
		.box div:nth-child(9){
			background: gray;
			transform:rotateY(150deg) translateZ(400px);
		}
		.box div:nth-child(10){
			background: brown;
			transform:rotateY(-150deg) translateZ(400px);
		}
		.box div:nth-child(11){
			background: cyan;
			transform:translateZ(400px);
		}
		.box div:nth-child(12){
			background: orange;
			transform:rotateY(180deg) translateZ(400px);
		}
		/*旋转*/
		@keyframes round{
            0%{
                transform: rotateX(0deg)rotateY(0deg);
            }
            80%{
                transform:  rotateX(180deg) rotateY(180deg);
            }
        }
	</style>
</head>
<body>
	<div class="box">
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
	</div>
</body>
</html>

在这里插入图片描述

我就是咸鱼

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
3D之12旋转体

<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .box{ width: 200px; height: 300px; border: 3px solid red; margin:auto; position: ab
复制链接

扫一扫