阴影的3D CSS3 3D箱子 [英] CSS3 3D Box With Shadows

问题描述

我正在制作通知系统。我想让这个通知像一个盒子，转向，有点像iOS中的一些通知，屏幕顶部像一个立方体旋转。

I'm making a notification system. I want this notification to show up like a box that turns, somewhat like some notifications in iOS that the top of the screen rotates like a cube.

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

Now, the front and back of the cube should be transparant/same color as background. When it turns, a shadow should fall over the sides that are not parallel to the front of the viewer, as if there is a lamp shining on the box. Can this be done?

要更清楚：背面的盒子与背景颜色相同，当转动盒子时，它不会像一个盒子转动，而是一片纸旋转到位。所以我想要的是，立方体的面孔取决于它的角度，而不是观察者的阴影。

To make more clear: Since the front & back of the box are the same as the background-color, when turning the box it wouldn't seem like a box turning but rather a slice of paper that rotates into place. So what I want is that faces of the cube get a shadow to it depending on their angle as opposed to the viewer.

例如，一旦前面你不能真正看到，因为它是与背景颜色相同的颜色）旋转1度，它应该得到一个更暗/更轻。另一个程度，多一点。因此，只有当它直接平行于用户时才显示面部的真实颜色。

For example, once the front-face (which you can't really see since it's the same color as the background-color) is rotated 1 degree, it should get a little darker/lighter. Another degree, a little more. So that the true color of the face is only shown when it's directly parallel to the user. This will create the illusion of there being a box, rather than a sliver of paper.

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

I'm using this tutorial on the cube: http://desandro.github.io/3dtransforms/docs/cube.html

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

另一个问题是，目前文本似乎有点拉长，如果你知道我的意思。通常 #cube 上的 transform：translateZ（-25px）; （见下面的代码）应该解决这个问题，它仍然似乎不成比例。

Another issue is that currently the text seems a bit stretched, if you know what I mean. Normally the transform: translateZ(-25px); (see code below) on the #cube should solve this, but it still seems out of proportion.

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

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>

推荐答案

通过设置通知的初始颜色面到最终颜色的较暗版本，我们可以使用

By setting the initial colour of the notification face to a darker version of the final color, we can use a CSS3 transition on the color attribute of that face to animate it to a lighter colour as the face is rotated.

我添加了一个新类，其中将添加/删除到通知面的较浅的green，并更改初始的颜色向 #cube .top 添加了一个新转换。

I've added a new class with the lighter "green" that will be added/removed to/from the notification face and changed the initial color added a new transition to #cube .top.

CSS中的一些拼写错误（ tranform → transform ， transparant → transparent ）并删除了重复的 -webkit-transform：translateZ（-25px）; .show-front | top | back 类，因为它们在同一个类中被覆盖。

I've also corrected some typos in the CSS (tranform → transform, transparant → transparent) and removed the duplicate -webkit-transform:translateZ(-25px); and non-prefixed version from the .show-front|top|back classes as they are being overridden in the same class.

最后，由于 25px 文字看起来模糊（在Chrome上）， 对我来说，删除 -webkit-perspective：1000px; 似乎消失了。

Lastly, since the notification face is translated towards the viewer by 25px the text looks blurry (on Chrome). This seems to go away by removing the -webkit-perspective: 1000px; for me. I'll leave that up to you if you want to remove it.

请参阅 演示 或以下代码：

See the demo or following code:

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

这篇关于阴影的3D CSS3 3D箱子的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！