CSS处理图像效果: 3D Glasses

如果看完了还不过瘾?想和作者深聊相关话题,可以点击这里向作者提问!

这是使用CSS的filters混合模式处理图片效果系列文章的第二篇。上一篇介绍了如何使用CSS混合模式中的lighten模式制作一张仿古图片效果,并学习如何做一张漂亮的褪色照片效果。在这篇文章中,我们将看看如何创建3D照片效果。

3D图像(又称为浮雕)

浮雕是立体三维图像中的一个类型,主要由两张照片错开大约2.5英寸距离,大约距离人类的眼睛间距离。其实就是创建一个错觉,当颜色和色调搭配得协调,这种错觉就越明显。(这也意味着一些人认为3D图像比在电影院看的3D电影更好看,这主要取决于他们的pupilary距离。)

3D图像

虽然最近受欢迎的电影中使用red/cyan多,但这个示例显示了一个red/green浮雕效果。

暗系的一面

加到图层混合模式,在上一节中,了解了混合模式中的**lighten**模式。在这篇文章中,将看看其相反模式:**darken**(他们看起来就是一对邪恶的双胞胎)。

好吧,为什么我称之为邪恶的双胞胎呢?主要是因为他们相互衬托的,让我们来看看是怎么回事吧。特别注意:混合模式只适用于顶部颜色块。

3D图像

我添加了一个灰色的背景,这样能更好的区分lightendarken之间的效果。

但有趣的问题是:当你在一个使用了darken混合模式上运用一个lighten混合模式。他们相交的部分会自动抵消。其实也像multiply/screencolor-burn/color-dodge一样,从数学角度上考虑,他们就彼此使用了一个相反的比例。

3D图像

上图中你可以看到,使用lighten混合模式的蓝色与使用darken混合模式相交在一起,而且他们相交的那部分变成了蓝色,好像没有使用任何混合模式一样。

3D图像

我们可以使用一张原始图像,并且运用上节所学到的有关知识,采用一些阴影颜色创建一个3D图像效果。

3D图像

如上图所示,有一个红色层和一个青色层,原始图像分离在两侧,大约2.5英寸。(在下面的示例中@mixin使用了$dist值)。青色和红色层使用多背景和background-blend-mode:lighten;的混合模式,将各自的亮度。然后给他们添加一个合适的角度值,让这些元素位置做一定的分开。

现在并不是简单的选择颜色,不过我们还是很幸运的。我们是在一个RGB颜色空间中。如果我们使用一个青色和黄色而不是青色和红色,重叠的部分将是绿色而不是白色,然后我们需要显示原来的像素值。在这种情况之下,最好是使用纯粹的RGB值,比如红色rgb(255,0,0),绿色rgb(0,255,0),蓝色rgb(0,0,255),但青色rgb(0,255,255)也同样适用。

3D图像

注意,有时候使用绿色和红色来替代红色和蓝色也能达到这种效果。

混合模式中的混合

我们使用了青色和红色,这是因为这最适合经典的3D图像效果。这里为了能更好的看清效果,添加一个额外的轮廓。

就是这么神奇,这也是混合模式中数学的用武之处。现在我们只是将顶层(红色)的混合模式换成darken,这样就可以抵消底层(青色)混合模式lighten,它们重复了相同的像素值。这意味着传播距离将显示相应的颜色(红色和青色),这主要由于两侧的像素不完全一致。用一个动画效果来解释这种现象:

Perspective

下一步是添加一个视角。我们可以使用perspectivetransform:rotateY属性,让第一个图产生错觉。由于每个图像都是反相的,所以在青色层上,我们可以使用perspective: 400px; transform: rotateY(5deg);(图像的宽度是400px),在红色层上,它继承他的父元素,所以在这个层上我们使用其父元素一半的旋转角度,所以设置为:perspective: -400px; transform: rotateY(-2.5deg);。同时给其添加一个filter: saturate(.8)来稀释一下效果,并且添加一个轮廓,让效果看得更清楚。

如果打不开Codepen或者说你的浏览器不支持混合模式,其效果看起来就像下图:

3D图像

左图是使用混合模式前效果,右图是使用混合模式后效果。

示例

.threeD-effect {
  margin: 30px auto 0;
  display: block;
  position: relative;
  height: 400px;
  -webkit-filter: saturate(0.75);
          filter: saturate(0.75);
  z-index: 1;
  -webkit-transform: rotateY(15deg);
        transform: rotateY(15deg);
  background: url('../images/posts/css-effects/2/bot.jpg'), cyan;
  background-blend-mode: lighten;
  background-size: cover;
}
.threeD-effect:after {
  content: '';
  position: absolute;
  display: block;
  width: 100%;
  height: 400px;
  z-index: 2;
  -webkit-transform: rotateY(7.5deg);
        transform: rotateY(7.5deg);
  background: url('../images/posts/css-effects/2/bot.jpg'), red;
  background-blend-mode: lighten;
  margin-left: 5px;
  background-size: cover;
  mix-blend-mode: darken;
}

@mixin

Sass(SCSS)

@mixin three-dee($img, $dist: 5px, $deg: 5deg, $width: 100%, $height: 500px) {
    z-index: 1;
    width: $width;
    height: $height;
    position: relative;
    transform: rotateY($deg);
    perspective: $width;
    background: url('#{$img}'), cyan;
    background-blend-mode: lighten;
    background-size: cover;

  &:after {
    content: '';
    position: absolute;
    display: block;
    width: $width;
    height: $height;
    z-index: 2;
    perspective: -$width;
    margin-left: $dist;
    transform: rotateY(-$deg/2);
    background: url('#{$img}'), red;
    background-blend-mode: lighten;
    background-size: cover;
    mix-blend-mode: darken;
  }
}

.cats-in-action {
  @include three-dee('img/cat.jpg', 5px, 10deg, 800px, 600px);
}

CSS

.cats-in-action {
  z-index: 1;
  width: 800px;
  height: 600px;
  position: relative;
  transform: rotateY(10deg);
  perspective: 800px;
  background: url("img/cat.jpg"), cyan;
  background-blend-mode: lighten;
  background-size: cover;
}
.cats-in-action:after {
  content: '';
  position: absolute;
  display: block;
  width: 800px;
  height: 600px;
  z-index: 2;
  perspective: -800px;
  margin-left: 5px;
  transform: rotateY(-5deg);
  background: url("img/cat.jpg"), red;
  background-blend-mode: lighten;
  background-size: cover;
  mix-blend-mode: darken;
}

效果

使用@mixin没用使用filter效果:

@include three-dee( 'http://una.im/images/posts/blend-modes/tahoe-prefilter.jpg', 5px, 7deg, 500px, 500px);

3D图像

本文根据@una的《CSS Image Effects #2: 3D Glasses》所译,整个译文带有我们自己的理解与思想,如果译得不好或有不对之处还请同行朋友指点。如需转载此译文,需注明英文出处:http://una.im/3d-effect

大漠

常用昵称“大漠”,W3CPlus创始人,目前就职于手淘。中国Drupal社区核心成员之一。对HTML5、CSS3和Sass等前端脚本语言有非常深入的认识和丰富的实践经验,尤其专注对CSS3的研究,是国内最早研究和使用CSS3技术的一批人。CSS3、Sass和Drupal中国布道者。2014年出版《图解CSS3:核心技术与案例实战》。

如需转载,烦请注明出处:http://www.w3cplus.com/css3/3d-effect.html

如需转载,烦请注明出处:https://www.w3cplus.com/css3/3d-effect.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部