初识3D-三
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了初识3D-三相关的知识，希望对你有一定的参考价值。
下载了可以设计生成模型的caxa软件，这个软件可以快速进行图像的绘画与制作，支持全参数化的工程建模方式，安装成功并运行。
可以制作成如下这样的：
另外，css3有些特殊的元素选择器这和jquery相似。效果图如下：
黑色的小球是旋转3D效果不是特别明显，主要是学习的是对每个小球的控制，上代码。
<!DOCTYPE html>
<html>
<head>
<title>Ball.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<style type="text/css">
h1{font-size:16px;}
dl,dt,dd{padding:0;margin:0;}
dl{
position:relative;
width:778px;
height:612px;
background:url(image/guan.jpg) no-repeat left top;
}
dt{
position:absolute;
color:red;
font-size:20px;
font-weight:bold;
}
img{
width:50px;
position:absolute;
}
dd:nth-of-type(1) img{
left:370px;
top:280px;
z-index:1000;
}
dd:nth-of-type(2) img{
left:330px;
top:250px;
width:40px;
z-index:100;
}
dd:nth-of-type(3) img{
left:390px;
top:250px;
width:40px;
z-index:100;
}
dd:nth-of-type(4) img{
left:300px;
top:220px;
width:30px;
z-index:10;
}
dd:nth-of-type(5) img{
left:350px;
top:220px;
width:30px;
z-index:10;
}
dd:nth-of-type(6) img{
left:405px;
top:220px;
width:30px;
z-index:10;
}
dd:nth-of-type(7) img{
left:270px;
top:190px;
width:20px;
}
dd:nth-of-type(8) img{
left:320px;
top:190px;
width:20px;
}
dd:nth-of-type(9) img{
left:370px;
top:190px;
width:20px;
}
dd:nth-of-type(10) img{
left:420px;
top:190px;
width:20px;
}
dl{
-moz-transform-style:preserve-3d;
-moz-perspective:300px;
}
dd img{
animation:xuanzhuan 6s linear infinite;
}
@-moz-keyframes xuanzhuan{
0% {
-moz-transform: rotate(0deg) ;
}
33% {
-moz-transform: rotate(120deg) ;
}
66% {
-moz-transform: rotate(240deg) ;
}
100% {
-moz-transform: rotate(360deg) ;
}
}
</style>
</head>
<body>
<h1>css大战保龄球</h1>
<dl>
<dt>1</dt>
<dd><img src="image/ball.png"></dd>
<dt>2</dt>
<dd><img src="image/ball.png"></dd>
<dt>3</dt>
<dd><img src="image/ball.png"></dd>
<dt>4</dt>
<dd><img src="image/ball.png"></dd>
<dt>5</dt>
<dd><img src="image/ball.png"></dd>
<dt>6</dt>
<dd><img src="image/ball.png"></dd>
<dt>7</dt>
<dd><img src="image/ball.png"></dd>
<dt>8</dt>
<dd><img src="image/ball.png"></dd>
<dt>9</dt>
<dd><img src="image/ball.png"></dd>
<dt>10</dt>
<dd><img src="image/ball.png"></dd>
</dl>
</body>
</html>
以上是关于初识3D-三的主要内容，如果未能解决你的问题，请参考以下文章