使用纯CSS进行3d变换

我正尝试用纯CSS重建this。我已经有了this。但从闪存版本中可以看到的想法是，当封面出现时，其他div为悬停的空间创建空间。使用纯CSS进行3d变换

我试图在auto上设置宽度，并在该特定div上设置了过渡属性，但没有运气。我也试图在悬停前将div的宽度设置为0，并将其设置为300px，但这并没有真正的动画效果。

它可能是简单的，也可能不是，但无论如何将是很好的推动正确的方向！

谢谢。

来源

2011-07-06 dandoen

您不需要WebGL浏览器就可以使用纯3D转换进行此操作。

当你悬停时，你必须明确地改变div的宽度，因为变换显式不会触发重布局。你需要确定书的内容。

对于悬停宽度更改以及转换的子div，应该使用包装div。

嵌套是改变健康的关键。

下面是它显示在行动的jsfiddle：http://jsfiddle.net/ZMqze/4/

需要多一点波兰语unhover。

来源

2011-07-06 17:50:44

是的，我想你”不幸的是需要一些JS来同时改变宽度。 –

你不需要javascript来做到这一点 –

为什么不宽度动画？我也希望它...... –

-1

首先，你需要一个支持硬件加速的WebGL的浏览器（那只是safari5 WindowsXP下，顺便说一句和webkitnightly custombuild为Linux - 或者WIN7）

把侧和盖一个专区内所谓的包装，具有转换属性的过渡（类似1s缓动左右）
你必须通过围绕Y轴旋转90度来隐藏顶盖
添加一个包装器：hover类自动旋转-90度围绕Y轴线

如果我稍后还有更多时间，我会尽力给你准确的css，但这些说明应该引导你达到你想要的结果。

来源

2011-07-06 08:37:49 japrescott

感谢您的回复，我不知道为什么它究竟是需要一个WebGL的浏览器。为“简单”3d变换？ – dandoen

在不同的系统上，我可以使用matrix3d css转换选项/属性，但是没有3d发生。只有浏览器，做了3D的Safari浏览器在WinXP或使用Qt WebKit的的每晚构建（这也不会在Linux上3D）..也许我有一个参数在配置遗失，使这个.. – japrescott

您可以使用CSS3中的3D转换功能。它会让你得到你想要的效果。您可以创建两个<div> s。一个用于正面，另一个用于背面。使用z-index使正面与背面重叠，并使用position: absolute将它们放在相同的位置。也可以通过设置backface-visibilty: none使其背面隐形。然后将它们包装在<div class="flipper">中，并将翻转动画添加到此。包裹里面<div class="container">

.container { 
    perspective: 1000; 
}

看包布将允许动画是3D（请确保使用供应商前缀）。

.flipper { 
    transition: 0.6s; 
    transform-style: preserve-3d; 
    position: relative; 
}

起落必须有相对位置，因为这两个元素中会相互重叠，并会一直绝对位置（确保供应商前缀添加到转换和过渡式）。

.container:hover .flipper{ 
    transform: rotateY(180deg); 
}

然后，你可以添加这段代码，使鳍状肢悬停在其包装上。本视频教程将帮助：http://www.youtube.com/watch?v=6ObIO-SjMZc

来源

2013-12-05 05:48:36

使用纯CSS进行3d变换

回答

相关问题