Question

我想创建一个带有一些很酷的3D效果的图像滑块，例如：http://tympanus.net/codrops/2011/09/05/slicebox-3d-image-slider/

问题是，虽然我知道如何使用CSS3 3D变换来旋转某些东西，但我不知道如何为图像的“部分”制作动画。在上面的链接中，脚本似乎以某种方式将图像“切片”成几个部分，然后分别为它们制作动画。但是，图像没有预先切片 - 它是一整个图像。

任何人都可以推荐任何有关如何实现此效果的教程，或者只是给出用于执行此操作的任何技术的名称？提前谢谢！

Answer 1

嗯，这个插件的功能非常简单：

您将图像放在无序列表中。一旦触发更改，就会发生以下情况。

正在创建div叠加层，其中包含5个其他div - 切片。

+----+----+----+----+----+
|    |    |    |    |    |
|    |    |    |    |    |
| 1  | 2  | 3  | 4  | 5  |
|    |    |    |    |    |
|    |    |    |    |    |
+----+----+----+----+----+

这些切片包含几个形成立方体的div，其中您要转换的图像设置为背景图像（仅显示其相应部分）。

            +---+\
  Slice 1:  |\  | \
  Image     | \_|__\
  currently | | |  |
  shown   ->| |_|__|
            | / |  /
            |/  | /<- Image to transition to
            +---+/

现在，对于每个小隔间，设置超时（长度略有不同），使用实际的CSS-Transition（180°旋转）旋转到新图像。

Answer 2

查看插件源代码，我可以看到确实切片图像并分别旋转每个部分。它会在动画制作之前创建切片并隐藏原始图像并显示新原始图像并在动画制作后立即销毁切片。

以下是切片图片的一种方法：

for each slice:
  create a new copy of the image
  place the image in a new div
  set the image `position` to `absolute` and `top` to minus the slice beginning
  set the div height to the slice height and `overflow` to `hidden`
  place the div to the correct position

Answer 3

CSS3动画就是随着时间的推移改变单个DOM节点的CSS属性。因此，从技术上讲，您无法为图像的某些部分制作动画 - 或者就此而言，更改DOM元素的特定区域区域的属性。所以你要做的就是拥有多个DOM元素，每个元素代表一个切片。

执行相同操作的一种方法是为每个切片设置一个div，并将图像设置为背景。并排放置的每个预先指定尺寸的div将使背景图像以它们组合形成整个图像的方式定位。

现在，您可以使用css动画为每个此类div设置动画。如果您打算使用javascript，则没有必要让服务器呈现所有这些div元素。事实上，创建div-s per-slice和设置背景位置可以通过javascript完成。

Answer 4

我正在制作一个微调器而不是在Photoshop中或使用:before选择器

在图像上设置径向背景渐变的任何地方制作单独的图像

-webkit-radial-gradient(center, ellipse cover, #fff 23%,transparent 27%,transparent 100%)

允许下方副本的中心显示（非动画），通过复制img元素并使用Javascript将其位置设置为与现有元素相同来定位

function spinBadge() {
    hovered = document.querySelector('a:hover img')
    spinner = document.createElement('img');
    spinner.src = hovered.src;
    spinner.className = 'spinner';
    spinner.setAttribute('width','120px');
    spinner.setAttribute('height','120px');
    spinner.setAttribute('style','border:0; margin:0; max-width: none; position: absolute; pointer-events: none; left: '+hovered.offsetLeft+'px; top: '+hovered.offsetTop+'px;');
    hovered.parentNode.appendChild(spinner);
    setTimeout(function(){document.querySelector('.spinner').className = 'spinner wheee'})
    setTimeout(function(){document.querySelector('.wheee').remove();},3000);
}

有很多方法可以通过改变边距等来“切割”整个图像，并让零件有选择地显示出来。

SVG图像也适用于动画，并且可以为各个部分提供类，从而使用CSS过渡进行动画处理。如果你给它一个谷歌（this想到的话），这个网站上有很多东西和CSS技巧。

如何使用CSS3动画部分图像

4 个答案: