我正在制作一个通知系统。我希望这个通知像一个可以转动的盒子一样显示,有点像 iOS 中的一些通知,屏幕顶部像立方体一样旋转。
现在,立方体的正面和背面应该是透明的/与背景颜色相同。当它转动时,阴影应该落在与观看者正面不平行的侧面上,就像有一盏灯照在盒子上一样。这可以吗?
说得更清楚一点:由于盒子的正面和背面与背景颜色相同,因此转动盒子时,它看起来不像一个盒子转动,而是一片旋转到位的纸张。所以我想要的是立方体的面根据其相对于观察者的 Angular 而获得阴影。
例如,一旦正面(你无法真正看到它,因为它与背景颜色相同)旋转 1 度,它应该会变得更暗/更亮。另一个学位,多一点。这样只有当脸部与用户直接平行时才能显示出脸部的真实颜色。这会产生一个盒子的错觉,而不是一张纸。
我正在多维数据集上使用本教程:http://desandro.github.io/3dtransforms/docs/cube.html
这是一个 fiddle :http://jsfiddle.net/BqJMW/3/
另一个问题是,如果你明白我的意思的话,目前的文本似乎有点拉长。通常,#cube
上的 transform:translateZ(-25px);
(参见下面的代码)应该可以解决此问题,但它似乎仍然不成比例。
CSS
body {
background: #ebebeb;
}
.container {
width: 200px;
height: 50px;
position: relative;
-webkit-perspective: 1000px;
perspective: 1000px;
}
#cube {
width: 100%;
height: 100%;
position: absolute;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transition: -webkit-transform 1s;
transition: transform 1s;
-webkit-transform: translateZ(-25px);
transform: tranlateZ(-25px);
}
#cube figure {
margin:0;
display: block;
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
#cube .front {
background: transparant;
-webkit-transform: translateZ(25px);
transform: translateZ(25px);
}
#cube .top {
background: green;
-webkit-transform: rotateX(-90deg) translateZ(25px);
transform: rotateX(-90deg);
}
#cube .back {
background: transparant;
-webkit-transform: rotateX(180deg) translateZ(25px);
transform: rotate(180deg);
}
#cube.show-front {
-webkit-transform:translateZ(-25px);
tranform: translateZ(-25px);
}
#cube.show-top {
-webkit-transform: translateZ(-25px);
transform: translateZ(-25px);
-webkit-transform: rotateX(90deg);
transform: rotateX(90deg);
}
#cube.show-back {
-webkit-transform: translateZ(-25px);
transform: translateZ(-25px);
-webkit-transform: rotateX(180deg);
transform: rotateX(180deg);
}
HTML
<section class="container">
<div id="cube">
<figure class="front">Front</figure>
<figure class="top">Your notification</figure>
<figure class="back">Back</figure>
</div>
</section>
最佳答案
通过将通知面的初始颜色设置为最终颜色的较暗版本,我们可以使用 CSS3 transition在该面的 color
属性上,在面旋转时将其动画化为较浅的颜色。
我添加了一个带有较浅“绿色”的新类,该类将在通知界面中添加/删除,并更改了初始颜色
,添加了新的颜色过渡到#cube .top
。
我还纠正了 CSS 中的一些拼写错误(transform
→ transform
、transparant
→ transparent
)并从 .show-front|top|back
类中删除重复的 -webkit-transform:translateZ(-25px);
和无前缀版本,因为它们被覆盖在同一个类(class)。
最后,由于通知面向查看者平移了25px
,因此文本看起来很模糊(在 Chrome 上)。通过删除 -webkit-perspective: 1000px;
对我来说,这似乎消失了。如果您想删除它,我会将其留给您。
请参阅demo或以下代码:
CSS
body {
background: #ebebeb;
}
.container {
width: 200px;
height: 50px;
position: relative;
-webkit-perspective: 1000px;
perspective: 1000px;
}
#cube {
width: 100%;
height: 100%;
position: absolute;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transition: -webkit-transform 1s;
transition: transform 1s;
-webkit-transform: translateZ(-25px);
transform: translateZ(-25px);
}
#cube figure {
margin:0;
display: block;
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
#cube .front {
background: transparent;
-webkit-transform: translateZ(25px);
transform: translateZ(25px);
}
#cube .top{
background-color:darkgreen;
-webkit-transform: rotateX(-90deg) translateZ(25px);
transform: rotateX(-90deg);
-webkit-transition:background-color .5s;
}
#cube .top.show {
background-color:green;
}
#cube .back {
background: transparent;
-webkit-transform: rotateX( 180deg ) translateZ(25px);
transform: rotate(180deg);
}
#cube.show-front{
}
#cube.show-top {
-webkit-transform: rotateX(90deg);
transform: rotateX(90deg);
}
#cube.show-back {
-webkit-transform: rotateX(180deg);
transform: rotateX(180deg);
}
JavaScript
$('.showfront').click(function () {
$('.top').removeClass('show');
$('#cube').removeClass().addClass('show-front');
});
$('.showtop').click(function () {
$('.top').addClass('show');
$('#cube').removeClass().addClass('show-top');
});
$('.showback').click(function(){
$('.top').removeClass('show');
$('#cube').removeClass().addClass('show-back');
});
关于带阴影的 CSS3 3D 框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17903674/