css 正多面体(正四面体、正六面体、正八面体、正十二面体、正二十面体)

老姚
老姚 发布于 2016-12-01 20:59:57 浏览:3190 类型:原创 - 随笔 分类:JavaScript - 思路 二维码: 作者原创 版权保护
需要的知识是3d变换。
比较关键的api是,实现绕着任意轴转动的rotate3d。
另外一点是通过clip-path实现多边形的绘制。
需要使用chrome浏览器观看。

正四面体(其中js是实现拖拽效果,非核心代码,可删除,下同)
<div class="container">
	<div></div>
	<div></div>
	<div></div>
	<div></div>
</div>
<style>
*{
	transform-style:preserve-3d;
}
body{
	background:black;
}
.container{
	width:200px;
	height:173.2px;
	position:relative;
	margin:200px auto;
}
.container div{
	width:200px;
	height:173.2px;
	position:absolute;
	-webkit-clip-path:polygon(50% 0,100% 100%,0 100%);
	-moz-clip-path:polygon(50% 0,100% 100%,0 100%);
	clip-path:polygon(50% 0,100% 100%,0 100%);
}
.container div:nth-child(1){
	transform:rotateX(-70.5deg);
	transform-origin:0 100%;
}
.container div:nth-child(2){
	transform:rotate3d(100, -173.2, 0, 70.5deg);
	transform-origin:0 100%;
}
.container div:nth-child(3){
	transform:rotate3d(-100, -173.2, 0, -70.5deg);
	transform-origin:100% 100%;
}
.container div:nth-child(1){ background:rgba(255,0,0,0.9);}
.container div:nth-child(2){ background:rgba(0,255,0,0.9);}
.container div:nth-child(3){ background:rgba(0,0,255,0.9);}
.container div:nth-child(4){ background:rgba(0,255,255,0.9);}

@keyframes rotate{
	from{
		transform: rotateY(1,1,1,0);
	}
	to{
		transform: rotate3d(1,1,1,360deg);
	}
}
body{
	animation: rotate 5s linear infinite;
	transform-orgin:50% 200px;
}
html{
	overflow:hidden;
}
</style>
<script>
var div = document.querySelector('div');
var flag = false;// 是否启动拖拽
document.addEventListener('mousedown', function() {
	flag = true;
	document.body.style.setProperty('animation-play-state', 'paused');
}, false);
document.addEventListener('mouseup', function() {
	flag = false;
	document.body.style.setProperty('animation-play-state', 'running');
}, false);
document.addEventListener('mousemove', function move(e) {
	if (!flag) {
		move.lastX = e.x;
		move.lastY = e.y;
		return;
	}
	var transform = getComputedStyle(div).getPropertyValue('transform');
	transform == 'none' && (transform = '');
	div.style.setProperty('transform', transform + 'rotateX(' + (move.lastY - e.y) / 5 + 'deg) rotateY(' + (e.x - move.lastX) / 5 + 'deg)');
	move.lastX = e.x;
	move.lastY = e.y;
}, false);
</script>

正六面体
<div class="container">
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
</div>
<style>
*{
	transform-style:preserve-3d;
}
body{
	background:black;
}
.container{
	width:200px;
	height:200px;
	position:relative;
	margin:200px auto;
	transform-style:preserve-3d;
}
.container div{
	width:200px;
	height:200px;
	position:absolute;
}
.container div:nth-child(1){
	transform:translateZ(200px);
}
.container div:nth-child(2){
	transform:rotateY(-90deg);
	transform-origin: 0 0;
}
.container div:nth-child(3){
	transform:rotateY(90deg);
	transform-origin: 100% 0;
}
.container div:nth-child(4){
	transform:rotateX(90deg);
	transform-origin:0 0;
}
.container div:nth-child(5){
	transform:rotateX(-90deg);
	transform-origin:0 100%;
}
.container div:nth-child(1){ background:rgba(255,0,0,0.9);}
.container div:nth-child(2){ background:rgba(0,255,0,0.9);}
.container div:nth-child(3){ background:rgba(0,0,255,0.9);}
.container div:nth-child(4){ background:rgba(255,255,0,0.9);}
.container div:nth-child(5){ background:rgba(0,255,255,0.9);}
.container div:nth-child(6){ background:rgba(255,0,255,0.9);}

@keyframes rotate{
	from{
		transform: rotate3d(1,1,1,0);
	}
	to{
		transform: rotate3d(1,1,1,360deg);
	}
}
body{
	animation: rotate 5s linear infinite;
	transform-orgin:50% 200px;
}
html{
	overflow:hidden;
}
</style>
<script>
var div = document.querySelector('div');
var flag = false;// 是否启动拖拽
document.addEventListener('mousedown', function() {
	flag = true;
	document.body.style.setProperty('animation-play-state', 'paused');
}, false);
document.addEventListener('mouseup', function() {
	flag = false;
	document.body.style.setProperty('animation-play-state', 'running');
}, false);
document.addEventListener('mousemove', function move(e) {
	if (!flag) {
		move.lastX = e.x;
		move.lastY = e.y;
		return;
	}
	var transform = getComputedStyle(div).getPropertyValue('transform');
	transform == 'none' && (transform = '');
	div.style.setProperty('transform', transform + 'rotateX(' + (move.lastY - e.y) / 5 + 'deg) rotateY(' + (e.x - move.lastX) / 5 + 'deg)');
	move.lastX = e.x;
	move.lastY = e.y;
}, false);
</script>

正八面体
<div class="container">
	<div class="one">
		<div class="two">
			<div class="one">
				<div class="two"></div>
			</div>
		</div>
		<div class="three">
			<div class="one">
				<div class="two">
					<div class="one">
						<div class="two"></div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<style>
*{
	transform-style:preserve-3d;
}
body{
	background:black;
}
.container{
	width:200px;
	height:173.2px;
	position:relative;
	margin:200px auto;
}
.container div{
	width:200px;
	height:173.2px;
	position:absolute;
	-webkit-clip-path:polygon(50% 0,100% 100%,0 100%);
	-moz-clip-path:polygon(50% 0,100% 100%,0 100%);
	clip-path:polygon(50% 0,100% 100%,0 100%);
	transition:all 1s;
}
.one{
	transform:rotate3d(-100, 173.2, 0, -109.28deg);
	transform-origin:50% 0;
	background:rgba(255,0,0,0.9);
}
.two{
	transform:rotate3d(100, 173.2, 0, -109.28deg);
	transform-origin:50% 0;
	background:rgba(0,255,0,0.9);
}
.three{
	transform:rotateX(109.28deg);
	transform-origin:50% 100%;
	background:rgba(0,255,0,0.9);
}

@keyframes rotate{
	from{
		transform: rotate3d(1,1,1,0);
	}
	to{
		transform: rotate3d(1,1,1,360deg);
	}
}
body{
	animation: rotate 5s linear infinite;
	transform-orgin:50% 200px;
}
html{
	overflow:hidden;
}
</style>
<script>
var div = document.querySelector('div');
var flag = false;// 是否启动拖拽
document.addEventListener('mousedown', function() {
	flag = true;
	document.body.style.setProperty('animation-play-state', 'paused');
}, false);
document.addEventListener('mouseup', function() {
	flag = false;
	document.body.style.setProperty('animation-play-state', 'running');
}, false);
document.addEventListener('mousemove', function move(e) {
	if (!flag) {
		move.lastX = e.x;
		move.lastY = e.y;
		return;
	}
	var transform = getComputedStyle(div).getPropertyValue('transform');
	transform == 'none' && (transform = '');
	div.style.setProperty('transform', transform + 'rotateX(' + (move.lastY - e.y) / 5 + 'deg) rotateY(' + (e.x - move.lastX) / 5 + 'deg)');
	move.lastX = e.x;
	move.lastY = e.y;
}, false);
</script>

正十二面体(精度是个问题啊,失之毫厘,谬之千里)
<div class="container">
	<div class="one c1">
		<div class="three2 c3"></div>
		<div class="four2 c4"></div>
	</div>
	<div class="two c2"></div>
	<div class="three c3">
		<div class="one2 c5"></div>
		<div class="five2 c1">
			<div class="three c3"></div>
			<div class="two c4"></div>
		</div>
	</div>
	<div class="four c4"></div>
	<div class="five c5"></div>
	<div class="c6"></div>
</div>
<style>
*{
	transform-style:preserve-3d;
}
body{
	background:black;
}
.container{
    width:200px;
    height:190.2px;
	position:relative;
	margin:200px auto;
}
.container div{
    width:200px;
    height:190.2px;
	position:absolute;
    -webkit-clip-path:polygon(19.0983% 100%, 80.9017% 100%, 100% 38.19873%, 50% 0, 0 38.19873%);
	transition:all 1s;
}
.one{
	transform:rotate3d(-19.0983, -61.80127, 0, -116.56deg);
	transform-origin:19.0983% 100%;
}
.one2{
	transform:rotate3d(-19.0983, -61.80127, 0, 116.56deg);
	transform-origin:19.0983% 100%;
}
.two{
	transform:rotateX(116.56deg);
	transform-origin:50% 100%;
}
.three{
	transform:rotate3d(19.0983, -61.80127, 0, 116.56deg);
	transform-origin:80.9017% 100%;
}
.three2{
	transform:rotate3d(19.0983, -61.80127, 0, -116.56deg);
	transform-origin:80.9017% 100%;
}
.four{
	transform:rotate3d(50, 38.19873, 0, -116deg);
	transform-origin:50% 0;
}
.four2{
	transform:rotate3d(50, 38.19873, 0, 116deg);
	transform-origin:50% 0;
}
.five{
	transform:rotate3d(-50, 38.19873, 0, 116deg);
	transform-origin:50% 0;
}
.five2{
	transform:rotate3d(-50, 38.19873, 0, -116deg);
	transform-origin:50% 0;
}
.c1{
	background:rgba(255,0,0,0.9);
}
.c2{
	background:rgba(0,255,0,0.9);
}
.c3{
	background:rgba(0,0,255,0.9);
}
.c4{
	background:rgba(255,255,0,0.9);
}
.c5{
	background:rgba(0,255,255,0.9);
}
.c6{
	background:rgba(255,0,255,0.9);
}
@keyframes rotate{
	from{
		transform: rotate3d(1,1,1,0);
	}
	to{
		transform: rotate3d(1,1,1,360deg);
	}
}
body{
	animation: rotate 5s linear infinite;
	transform-orgin:50% 200px;
}
html{
	overflow:hidden;
}
</style>
<script>
var div = document.querySelector('div');
var flag = false;// 是否启动拖拽
document.addEventListener('mousedown', function() {
	flag = true;
	document.body.style.setProperty('animation-play-state', 'paused');
}, false);
document.addEventListener('mouseup', function() {
	flag = false;
	document.body.style.setProperty('animation-play-state', 'running');
}, false);
document.addEventListener('mousemove', function move(e) {
	if (!flag) {
		move.lastX = e.x;
		move.lastY = e.y;
		return;
	}
	var transform = getComputedStyle(div).getPropertyValue('transform');
	transform == 'none' && (transform = '');
	div.style.setProperty('transform', transform + 'rotateX(' + (move.lastY - e.y) / 5 + 'deg) rotateY(' + (e.x - move.lastX) / 5 + 'deg)');
	move.lastX = e.x;
	move.lastY = e.y;
}, false);
</script>

正二十面体(表示画时,好累)
<div class="container">
	<div class="one c1">
		<div class="two c2">
			<div class="one c3">
				<div class="two c4">
					<div class="one c5"></div>
				</div>
				<div class="three c2"></div>
			</div>
			<div class="four c4">			
			</div>
		</div>
		<div class="three c2">
			<div class="one c1">
				<div class="two c3">
					<div class="one c4">
						<div class="two c5"></div>
						<div class="three c2">
							<div class="five c1"></div>
						</div>
					</div>
				</div>
				<div class="three c4">
					<div class="five c1">
						<div class="three c2">
							<div class="one c3">
								<div class="three c5">
									<div class="one c3"></div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<style>
*{
	transform-style:preserve-3d;
}
body{
	background:black;
}
.container{
	width:200px;
	height:173.2px;
	position:relative;
	margin:200px auto;
}
.container div{
	width:200px;
	height:173.2px;
	position:absolute;
	-webkit-clip-path:polygon(50% 0,100% 100%,0 100%);
	-moz-clip-path:polygon(50% 0,100% 100%,0 100%);
	clip-path:polygon(50% 0,100% 100%,0 100%);
	transition:all 1s;
}
.one{
	transform:rotate3d(-100, 173.2, 0, -138.1deg);
	transform-origin:50% 0;
}
.two{
	transform:rotate3d(100, 173.2, 0, -138.1deg);
	transform-origin:50% 0;
}
.three{
	transform:rotateX(138deg);
	transform-origin:50% 100%;
}
.four{
	transform:rotateX(-138deg);
	transform-origin:50% 100%;
}
.five{
	transform:rotate3d(100, 173.2, 0, 138.1deg);
	transform-origin:50% 0;
}
.c1{
	background:rgba(255,0,0,0.9);
}
.c2{
	background:rgba(0,255,0,0.9);
}
.c3{
	background:rgba(0,0,255,0.9);
}
.c4{
	background:rgba(255,255,0,0.9);
}
.c5{
	background:rgba(0,255,255,0.9);
}
@keyframes rotate{
	from{
		transform: rotateY(0);
	}
	to{
		transform: rotateY(360deg);
	}
}
body{
	animation: rotate 5s linear infinite;
	transform-orgin:50% 200px;
}
html{
	overflow:hidden;
}
</style>
<script>
var div = document.querySelector('div');
var flag = false;// 是否启动拖拽
document.addEventListener('mousedown', function() {
	flag = true;
	document.body.style.setProperty('animation-play-state', 'paused');
}, false);
document.addEventListener('mouseup', function() {
	flag = false;
	document.body.style.setProperty('animation-play-state', 'running');
}, false);
document.addEventListener('mousemove', function move(e) {
	if (!flag) {
		move.lastX = e.x;
		move.lastY = e.y;
		return;
	}
	var transform = getComputedStyle(div).getPropertyValue('transform');
	transform == 'none' && (transform = '');
	div.style.setProperty('transform', transform + 'rotateX(' + (move.lastY - e.y) / 5 + 'deg) rotateY(' + (e.x - move.lastX) / 5 + 'deg)');
	move.lastX = e.x;
	move.lastY = e.y;
}, false);
</script>


本文完。
z
给个赞 47 人点赞
收藏 25 人收藏
评论 已有 28 条评论;以下用户言论只代表其个人观点,不代表 前端网(QDFuns) 的观点或立场。
登录 以后才能发表评论
最热评论
前端李李
前端李李2016-12-02 13:51:2115F
老姚  你这么闲帮我干点活呗。 我准备跟我的小伙伴出书了。
举报 支持 (2) 回复 (2)
老姚
老姚2016-12-02 10:51:3614F
个人离职中,搞了一通宵。。。 //@1007561607:你咋天天这么多时间?敲这些代码没几个小时不行吧
举报 支持 (1) 回复 (2)
最新评论
老姚
老姚2016-12-06 16:44:2628F
emoticon,不是 //@funfanpan:我还以为老姚是前端网的人呢!!!! //@老姚:个人离职中,搞了一通宵。。。 //@1007561607:你咋天天这么多时间?敲这些代码没几个小时不行吧
举报 支持 (0) 回复 (0)
funfanpan
funfanpan2016-12-06 13:07:1327F
我还以为老姚是前端网的人呢!!!! //@老姚:个人离职中,搞了一通宵。。。 //@1007561607:你咋天天这么多时间?敲这些代码没几个小时不行吧
举报 支持 (0) 回复 (1)
fanbuxie
fanbuxie2016-12-06 10:06:5126F
北京欢迎你 //@老姚:魔都 //@fanbuxie:老姚 你现在在哪呢  北京吗 还是?
举报 支持 (0) 回复 (0)
老姚
老姚2016-12-05 22:13:3725F
魔都 //@fanbuxie:老姚 你现在在哪呢  北京吗 还是?
举报 支持 (0) 回复 (1)
fanbuxie
fanbuxie2016-12-05 10:11:1424F
老姚 你现在在哪呢  北京吗 还是?
举报 支持 (0) 回复 (1)
milko
milko2016-12-05 09:23:0223F
现在体验就好多了 //@老姚:改了一下,通过设置animation-play-state,容易做到的,不过有动画属性,重设置transform是不起作用的。因此把动画效果放到body上了。 //@老姚:点击时,拖拽过程中,是去掉默认动画效果的,将就着看吧。 //@milko:多面体点击的时候,它会突然闪动到一定的位置,体验不太好,姚叔改进一下呗
举报 支持 (0) 回复 (0)
milko
milko2016-12-05 09:22:2522F
现在还要兼容IE6?你还能见到IE6么 //@1063363934:大神给点活路把,我还在兼容ie6那。
举报 支持 (0) 回复 (0)
1063363934
10633639342016-12-03 10:26:5621F
大神给点活路把,我还在兼容ie6那。
举报 支持 (0) 回复 (1)
陈陈陈大文
陈陈陈大文2016-12-03 09:27:1620F
期待李李的叔叔,哦,书书 //@前端李李:老姚  你这么闲帮我干点活呗。 我准备跟我的小伙伴出书了。
举报 支持 (0) 回复 (0)
陈陈陈大文
陈陈陈大文2016-12-03 09:26:2119F
真有耐心。。。
举报 支持 (0) 回复 (0)
极乐网
极乐网2016-12-02 17:46:3118F
嗯,厉害了~ //@老姚:没地方可用,只是兴趣。。。顺便熟悉熟悉技术。。。 //@极乐网:顶一个!这个可以应用到哪些地方?
举报 支持 (0) 回复 (0)
1007561607
10075616072016-12-02 14:53:5117F
厉害,,需要向你学习,哈哈 //@老姚:个人离职中,搞了一通宵。。。 //@1007561607:你咋天天这么多时间?敲这些代码没几个小时不行吧
举报 支持 (0) 回复 (0)
老姚
老姚2016-12-02 13:58:4716F
找我当技术评审? //@前端李李:老姚  你这么闲帮我干点活呗。 我准备跟我的小伙伴出书了。
举报 支持 (0) 回复 (0)
前端李李
前端李李2016-12-02 13:51:2115F
老姚  你这么闲帮我干点活呗。 我准备跟我的小伙伴出书了。
举报 支持 (2) 回复 (2)
老姚
老姚2016-12-02 10:51:3614F
个人离职中,搞了一通宵。。。 //@1007561607:你咋天天这么多时间?敲这些代码没几个小时不行吧
举报 支持 (1) 回复 (2)
老姚 老姚 作者

与自己为敌,与自己为友,一边深挖思想,一边埋葬自己。

作者最新