使用CSS创建笛卡尔（Cartesian）畸变效果

Question

我正在尝试重新创建纽约时报时装周页面中使用的笛卡尔畸变效果。然而，他们使用的是D3版本3和D3js的鱼眼插件，这与D3版本4不兼容。

由于我们整个项目都是在D3 V4中进行的，我无法降级到D3版本3。

是否有其他方法可以使用CSS和jquery实现这种效果？

我已经尝试过，这是我目前的进展：预览

window.onload = run;
function run() {
    if ($('.overlayDiv').css('display') != 'none') {
        var container = d3.select('.overlayDiv');
        container.empty();
        var val = parseInt(5);
        var overlayWidth = $(".overlayDiv").width();
        var vwidth = (overlayWidth / (val));
        console.log(vwidth);
        for (i = 0; i < val; ++i) {
            var div = container.append("div").style("width", vwidth + "px")
                .style("height", "100%")
                .style("background", "rgb(75, 123, 175)")
                .style("float", "left")

            var year = div.text(i)
                .attr("class", "summary")
                .style("text-align", "center")
                .style("font-size", "32px")
                .style("font-weight", "bold")
                .style("line-height", "100px").style("color", "white")
                .on('mouseover', function() {
                    d3.select(this)
                        .transition().style('width', $(".overlayDiv").width() / 2 + "px")
                        .style("background", "rgba(90, 90, 90, 0.78)")

                    $('.summary').not(this).each(function() {
                        $(this).css("width", (overlayWidth / 3) / (val));
                    });

                })
                .on('mouseout', function() {
                    d3.select(this)
                        .transition().style('width', vwidth + "px")
                        .style("background", "rgb(75, 123, 175)")
                    $('.summary').not(this).each(function() {
                        $(this).css("width", vwidth);
                    });
                })
        }

        $('.overlayDiv').show();
        //$('.overlayDiv').text(this.firstChild.nextSibling.innerHTML);
        $('.overlayDiv').addClass("overlayActive");
        $('.overlayDiv').removeClass("overlayInactive");
    } else {
        var container = d3.select('.overlayDiv');
        container.empty();
        $('.overlayDiv').hide();
        $('.overlayDiv').text("");
        $('.overlayDiv').removeClass("overlayActive");
        $('.overlayDiv').addClass("overlayInactive");
    }
}

如何改进这个并实现在纽约时报中看到的效果？

- devN

---

你一定要使用d3吗？只用CSS也可以达到同样的效果。 - Aslam

你可能想看一下这个：http://codepen.io/hunzaboy/pen/qrRpzZ - Aslam

@hunzaboy 谢谢。就这样吧。D3用于基于数据的动态“div”创建，如果能够使用D3 v4实现效果会更好，但在这个问题中我正在寻找CSS解决方案。 - devN

好的，我将其发布为答案。请选中它作为答案，以便其他人能够找到它并受益。 - Aslam

Answer 1

你可以只使用CSS来实现这种效果。

代码笔：http://codepen.io/hunzaboy/pen/qrRpzZ

body {
  background: #444;
}

.items {
  height: 128px;
  /*change this as per your requirments */
  overflow: hidden;
  display: flex;
}

.item {
  box-shadow: inset 0 0 0 1px #000;
  align-items: center;
  transition: flex 0.2s;
  background-size: cover;
  background-position: center;
  flex: 1;
}

$class-slug: item !default;
@for $i from 1 through 20 {
  .#{$class-slug}-#{$i} {
    background-image: url("https://randomuser.me/api/portraits/women/#{$i}.jpg");
  }
}


/* Flex Items */

.item>* {
  /*   flex: 1 0 auto; */
}

.item:hover {
  flex: 3;
}

.item:hover ~ .item {
  flex: 2;
}

- Aslam

---

能否将从一个 div 到另一个 div 的“跳跃”最小化，并平滑过渡，使其更像鱼眼效果？ - devN

@devN，嗯...你可以在缩放上玩转过渡延迟。 - Aslam