CSS

Question

我正在制作通知系统。我希望这个通知显示为一个转动的盒子，有点像iOS中的一些通知，屏幕顶部像一个立方体一样旋转。

现在，立方体的正面和背面应该是透明的/与背景颜色相同的颜色。当它转动时，阴影应落在与观察者前方不平行的两侧，好像有一盏灯照在盒子上。可以这样做吗？

更清楚：从前面和后面开始背面的盒子与背景颜色相同，当转动盒子时，它看起来不像是一个盒子转动，而是一片旋转到位的纸片。所以我想要的是立方体的面部取决于它们的角度，而不是观察者。

例如，一旦正面（你不能真正看到，因为它与背景颜色相同）旋转1度，它应该会变得更暗/更亮。另一个学位，多一点。因此，只有当面部与用户直接平行时才会显示面部的真实颜色。这将产生一种盒子的错觉，而不是纸条。

我在多维数据集上使用本教程：http://desandro.github.io/3dtransforms/docs/cube.html

这是一个小提琴：http://jsfiddle.net/BqJMW/3/

另一个问题是，如果你知道我的意思，目前的文字看起来有点紧张。通常，transform: translateZ(-25px);上的#cube（请参阅下面的代码）应该可以解决这个问题，但它似乎仍然不成比例。

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>

Answer 1

通过将通知面的初始颜色设置为最终颜色的较暗版本，我们可以使用该面的color属性上的CSS3 transition来设置动画当脸部旋转时，颜色会变浅。

我添加了一个较新的类，其中较浅的“绿色”将添加到/从通知面中删除，并更改了初始color添加了一个新的过渡到{ {1}}。

我还更正了CSS中的一些拼写错误（#cube .top→tranform，transform→transparant）并删除了重复的transparent和非来自-webkit-transform:translateZ(-25px);类的前缀版本，因为它们在同一个类中被重写。

最后，由于通知面被.show-front|top|back向观众转化，因此文字看起来很模糊（在Chrome上）。对我来说，删除25px似乎已经消失了。如果你想删除它，我会把它留给你。

请参阅demo或以下代码：

<强> CSS

-webkit-perspective: 1000px;

<强>的JavaScript

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);
}

带有阴影的CSS3 3D盒子

CSS

HTML

1 个答案: