css 实现动画折叠展开_CSS 3D折叠动画-白红宇

css 实现动画折叠展开

provides loads of inspiration for front-end developers, especially when it comes to the CSS and JavaScript wonders they create. Last year I duplicated their with both MooTools and pure CSS; this time I'm going to duplicate their map fold-in effect. This effect uses 3D CSS animations which makes the animation even more sexy, and to make it red host, the animation requires no JavaScript!

为前端开发人员提供了很多灵感，特别是在涉及他们创建CSS和JavaScript奇迹时。去年，我用MooTools和纯CSS复制了它们。这次，我将复制它们的地图折叠效果。此效果使用3D CSS动画，使动画更加性感，并且使其成为红色宿主，该动画不需要JavaScript！

HTML (The HTML)

There's a series of HTML elements that need to be in place to accomplish the effect and keep the content in place:

需要一系列HTML元素来实现效果并将内容保持在原位：

The first parent element will define 3D state, the second parent element will contain the fully viewable code during the animation, and the third parent is the most visibly different during the animation progress.

第一个父元素将定义3D状态，第二个父元素将在动画过程中包含完全可见的代码，而第三个父元素在动画过程中的区别最大。

CSS (The CSS)

The CSS to complete this animation is quite interesting, and there's probably less of it than you'd think:

完成此动画CSS很有趣，而且可能比您想象的要少：

/* Static state */#container 	{ 	width: 400px; 	height: 400px; 	position: relative; 	border: 1px solid #ccc; }.parent1 	{ 	/* overall animation container */	height: 0; 	overflow: hidden;	transition-property: height;	transition-duration: 1s;	perspective: 1000px;	transform-style: preserve-3d;}.parent2	{ 	/* full content during animation *can* go here */ }.parent3	{ 	/* animated, "folded" block */	height: 56px; 	transition-property: all; 	transition-duration: 1s;	transform: rotateX(-90deg);	transform-origin: top; }/* Hover states to trigger animations */#container:hover .parent1	{ 	height: 111px; }#container:hover .parent3	{	transform: rotateX(0deg); 	height: 111px; }

The static state of parent1 sets the 3D transform and perspective states, starting at 0px height. The static state of parent3 sets the transition and transformation of the rotation. Upon hover the parent1 and parent3 heights are animated to full height, 111px in this case, and rotated to 0deg, i.e. a front-facing state.

parent1的静态状态设置3D变换和透视图状态，从0px高度开始。 parent3的静态状态设置旋转的过渡和转换。悬停时，parent1和parent3的高度将设置为全高，在这种情况下为111px，并旋转到0deg(即朝前的状态)。

I get the feeling we'll be seeing a lot more of this animation in the future; a folding billboard is a nice effect and takes very little space. As evidenced above, there's also very little CSS required so there's a large payoff for so little code. I do think this effect looks better when an image is animated in -- it's easier to visually see the transform.

我觉得我们将来会看到更多的动画。折叠式广告牌效果很好，占用空间很小。正如上面所证明的，也几乎不需要CSS，因此只需很少的代码就能获得丰厚的回报。我确实认为，在对图像进行动画处理时，这种效果看起来更好-从视觉上看更容易看到变换。

翻译自:

css 实现动画折叠展开