css3实现立方体旋转附源码

最新推荐文章于 2022-12-22 08:51:49 发布

Izrj

最新推荐文章于 2022-12-22 08:51:49 发布

阅读量710

点赞数 1

分类专栏： CSS3 文章标签： css3 css3实现立方体旋转附源码源码下载 css教程立方体

原文链接：http://www.baidu.com

版权

CSS3 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

在这里插入图片描述

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>测试文档</title>
</head>
<style>
*{
margin: 0;
padding:0;
list-style:none;
border:0;
}
div{
width:200px;
height:200px;
border:1px dashed #000;
margin:100px auto;
}
ul{
width:200px;height:200px;	
position: relative;
transform-style: preserve-3d;
animation: sm 4s linear infinite;

}
@keyframes sm{
	form{transform: rotateX(0) rotateY(0) rotateX(0);}
to{transform: rotateZ(360deg) rotateX(360deg) rotateY(360deg)};
}
li{
width:200px;height:200px;	
position: absolute;
left: 0;
top: 0;
background:url(QQ图片20191210111156.jpg) no-repeat 0 0; 
}

li:nth-of-type(1){transform: translateZ(100px);}
li:nth-of-type(2){transform: rotateY(180deg) translateZ(100px);}
li:nth-of-type(3){transform: rotateY(89deg) translateZ(100px);}
li:nth-of-type(4){transform: rotateY(-89deg) translateZ(100px);}
li:nth-of-type(5){transform: rotateX(89deg) translateZ(100px);}
li:nth-of-type(6){transform: rotateX(-89deg) translateZ(100px);}



/*
li:nth-of-type(1) 选择器
transform转换 tra animation动画 infinite无限循环
alternate 轮流
rotate旋转


transition: all 3s linear匀速;
scale(int);放大

*/
/*section{
width:200px;
height:200px;
background:gold;
position: absolute;
left: 0;
top: 0;
animation: smallzhuang 5s linear infinite alternate;
}
@keyframes smallzhuang{
	0%{left:0;top 0;}
	25%{left:400px;top: 0;}
	50%{left:400px;top: 400px;}
	75%{left:0;top: 400px;}
	100%{left:0;top: 0;}
}
@-webkit-keyframes  smallzhuang{ /*兼容 Safari and Chrome*/
	0%{left:0;top 0;}
	25%{left:400px;top: 0;}
	50%{left:400px;top: 400px;}
	75%{left:0;top: 400px;}
	100%{left:0;top: 0;}
}*/
/*section:hover{transform:rotate(70deg);}*/

</style>
<body>

<div>
<ul>
<li>前</li>
<li>后</li>
<li>左</li>
<li>右</li>
<li>上</li>
<li>下</li>
</ul>
</div>
<!-- <section></section> -->
</body>
</html>