我最近在玩浏览器,现在我在与3D作斗争。WebGL太棒了,我也可以在CSS3中做3D?甚至更好!好的,所以我的愿景是使用嵌套变换(使用preserve-3D)创建浮动的3D对象。
HTML
<div class="scene">
<div class="box">
<div class="side_1"></div>
<div class="side_2"></div>
<div class="side_3"></div>
<div class="side_4"></div>
<div class="side_5"></div>
<div class="side_6"></div>
</div>
<div class="box">
<div class="side_1"></div>
<div class="side_2"></div>
<div class="side_3"></div>
<div class="side_4"></div>
<div class="side_5"></div>
<div class="side_6"></div>
</div>
<div class="box">
<div class="side_1"></div>
<div class="side_2"></div>
<div class="side_3"></div>
<div class="side_4"></div>
<div class="side_5"></div>
<div class="side_6"></div>
</div>
<div class="box">
<div class="side_1"></div>
<div class="side_2"></div>
<div class="side_3"></div>
<div class="side_4"></div>
<div class="side_5"></div>
<div class="side_6"></div>
</div>
</div>
CSS(我使用的是prefixfree)
.scene {
perspective: 3500;
perspective-origin: 25% 100%;
animation: spin 15s infinite linear;
transform-style: preserve-3d;
width: 960px;
height: 350px;
margin: 80px auto;
}
.box {
width: 150px;
height: 180px;
position: absolute;
transform-style: preserve-3d;
top: 40px;
}
.box div {
width: 150px;
height: 180px;
opacity: 0.75;
background-color: #bada55;
position: absolute;
}
.box .side_1 {
transform: rotateY( 0deg ) translateZ( 75px );
background-color: #FF0;
}
.box .side_2 {
transform: rotateX( 180deg ) translateZ( 75px );
background-color: #F00;
}
.box .side_3 {
transform: rotateY( 90deg ) translateZ( 75px );
background-color: #CCC; }
.box .side_4 {
transform: rotateY( -90deg ) translateZ( 75px );
background-color: #000;
}
.box .side_5 {
height: 150px;
width: 150px;
background-color: #00a2ff;
transform: rotateX( 90deg ) translateZ( 75px ); }
.box .side_6 {
height: 150px;
background-color: #00a2ff;
width: 150px;
transform: rotateX( -90deg ) translateZ( 105px ); }
.box:first-child {
position: absolute;
top: 40px;
}
.box:last-child {
right: 0;
}
.box:nth-child(2) {
background: url(../img/dot.jpg) repeat-y center center transparent;
transform: translateZ( -600px );
left: 480px;
}
.box:nth-child(3) {
background: url(../img/dot.jpg) repeat-y center center transparent;
transform: translateZ( 600px );
left: 480px;
}
@keyframes spin {
0% { transform: rotateY(0); }
100% { transform: rotateY(360deg); }
}
一切都设置好了,并且正常工作。但是等等,发生了什么?为什么远的物体比近的物体大?我不明白。是webkit错误,还是我遗漏了什么?
http://stretchbox.org/projects/Nextgen/floaters.php-这里有一个例子。
.scene
也在旋转,因此您需要将透视和透视原点应用于其父对象,在您的情况下,父对象将是主体。
body {
perspective: 3500;
perspective-origin: 25% 100%;
}
你可以在这里看到一个演示:
http://jsfiddle.net/dw58P/embedded/result/
顺便说一句,项目不错!