css动态堆叠卡,css3层次堆叠效果

这种实例其实在css3刚出的时候就比较风靡了，也算是入门级的很好实例吧，还是很值得去练练手的。它主要是对css3的:before和:after的应用，当然再加上一些rotate的旋转及box-shadow的阴影，最后配以:hover来达到动画的效果。由于webkit内核不支持:hover之后其他元素的动画效果(如:hover:before；:hover *；:hover + *)，所以该实例用webkit内核浏览器来看，鼠标滑过直接就到生硬的最后状态，没有动画过程。.stack { position: relative; z-index: 10; }

/* Image styles */

.stack img { max-width: 100%; height: auto; vertical-align: bottom; border: 10px solid #fff; border-radius: 3px;

-webkit-box-sizing: border-box;

-moz-box-sizing: border-box;

box-sizing: border-box;

-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);

-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);

box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);

}

/* Stacks creted by the use of generated content */

.stack:before, .stack:after { content: ""; border-radius: 3px; width: 100%; height: 100%; position: absolute; border: 10px solid #fff; left: 0;

-webkit-box-sizing: border-box;

-moz-box-sizing: border-box;

box-sizing: border-box;

-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);

-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);

box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);

-webkit-transition: 0.3s all ease-out;

-moz-transition: 0.3s all ease-out;

transition: 0.3s all ease-out;

}

.stack:before { top: 4px; z-index: -10; } /* 1st element in stack (behind image) */

.stack:after { top: 8px; z-index: -20; } /* 2nd element in stack (behind image) */

/* Second stack example (rotated to the right from the bottom left) */

.stack.rotated:before {

-webkit-transform-origin: bottom left;

-moz-transform-origin: bottom left;

transform-origin: bottom left;

-webkit-transform: rotate(2deg);

-moz-transform: rotate(2deg);

transform: rotate(2deg);

}

.stack.rotated:after {

-webkit-transform-origin: bottom left;

-moz-transform-origin: bottom left;

transform-origin: bottom left;

-webkit-transform: rotate(4deg);

-moz-transform: rotate(4deg);

transform: rotate(4deg);

}

/* Third stack example (One stack element rotated in the opposite direction) */

.stack.twisted:before {

-webkit-transform: rotate(4deg);

-moz-transform: rotate(4deg);

transform: rotate(4deg);

}

.stack.twisted:after {

-webkit-transform: rotate(-4deg);

-moz-transform: rotate(-4deg);

transform: rotate(-4deg);

}

/* Fourth stack example (Similar to the second but rotated left) */

.stack.rotated-left:before {

-webkit-transform-origin: bottom left;

-moz-transform-origin: bottom left;

transform-origin: bottom left;

-webkit-transform: rotate(-3deg);

-moz-transform: rotate(-3deg);

transform: rotate(-3deg);

}

.stack.rotated-left:after {

-webkit-transform-origin: bottom left;

-moz-transform-origin: bottom left;

transform-origin: bottom left;

-webkit-transform: rotate(-6deg);

-moz-transform: rotate(-6deg);

transform: rotate(-6deg);

}

/* Reset all rotations on hover */

.stack:hover:before, .stack:hover:after {

-webkit-transform: rotate(0deg);

-moz-transform: rotate(0deg);

transform: rotate(0deg);

}