如何使用CSS3对图像的各个部分进行动画处理
我想创建一个具有一些很酷的3d效果的图像滑块，比如这个：http://tympanus.net/codrops/2011/09/05/slicebox-3d-image-slider/
问题是，虽然我知道如何使用CSS3 3D变换来旋转某些东西，但我不知道如何使图像的“部分”具有动画效果。在上面的链接中，脚本似乎以某种方式将图像“分割”成几个部分，然后分别对这些部分进行动画处理。然而，图像并没有事先被分割--它是一个完整的图像。
有没有人可以推荐一些关于如何实现这种效果的教程，或者只是给出用来实现这一效果的技术的名称？提前谢谢你！
回答 4
Stack Overflow用户
发布于 2012-10-28 00:43:40
看一下插件的源代码，我可以看到它确实对图像进行了切片，并分别旋转了每个部分。它在动画之前创建切片并隐藏原始切片，并在动画之后立即显示新的原始切片并销毁切片。
以下是对图像进行切片的一种方法：
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 positionStack Overflow用户
发布于 2012-10-28 01:06:50
这个插件的功能非常简单：
您的图像在一个无序列表中。一旦触发更改，就会发生以下情况。
正在创建一个div覆盖图，其中包含5个其他divs切片。
+----+----+----+----+----+
| | | | | |
| | | | | |
| 1 | 2 | 3 | 4 | 5 |
| | | | | |
| | | | | |
+----+----+----+----+----+这些切片包含几个div，它们形成一个立方体，将您想要转换的图像设置为背景图像(只显示相应的部分)。
+---+\
Slice 1: |\ | \
Image | \_|__\
currently | | | |
shown ->| |_|__|
| / | /
|/ | /<- Image to transition to
+---+/现在，为每个隔间设置一个超时(长度略有不同)，使用实际的CSS转换(180°旋转)旋转到新图像。
Stack Overflow用户
发布于 2012-10-28 00:57:15
CSS3动画是关于随着时间的推移改变单个DOM节点的CSS属性。因此，从技术上讲，您不能对图像的某些部分进行动画处理，也不能更改DOM元素的特定区域的属性。因此，您需要做的实际上是拥有多个DOM元素，每个DOM元素表示一个切片。
这样做的一种方法是为每个切片创建一个div，并将图像设置为背景。每个预先指定大小的div并排放置，背景图像将以这样的方式定位，它们将组合在一起形成整个图像。
现在，您可以使用css动画对每个这样的div进行动画处理。如果您打算使用javascript，那么没有必要让服务器呈现所有这些div元素。实际上，可以通过javascript创建每个切片的div-s并设置背景位置。
https://stackoverflow.com/questions/13101841
复制相似问题
腾讯云开发者
