Bài viết sưu tầm

Với Hiệu ứng đơn giản này, sử dụng CSS 3D hình ảnh của bạn sẽ trở nên sinh động hơn mà không cần dùng đến javascrip

#container1     {
    width: 250px;
    height: 250px;
    position: relative;
    margin-right: 10px;
    margin-left: 10px;
    border: 4px solid #ccc;
    background-image: url(../images/colover.jpg);
    margin-bottom: 25px;
   float: left;
}
#container1 .parent1     {
    height: 0;
    overflow: hidden;
    transition-property: height;
    transition-duration: 1s;
    perspectheight: 0;
    overflow: hidden;
    -webkit-transition-property: height;
    -webkit-transition-duration: .5s;
    -webkit-perspective: 1000px;
    -webkit-transform-style: preserve-3d;
    -moz-transition-property: height;
    -moz-transition-duration: .5s;
    -moz-perspective: 1000px;
    -moz-transform-style: preserve-3d;
    -o-transition-property: height;
    -o-transition-duration: .5s;
    -o-perspective: 1000px;
    -o-transform-style: preserve-3d;
    transition-property: height;
    transition-duration: .5s;
    perspective: 1000px;
    transform-style: preserve-3d;ive: 1000px;
    transform-style: preserve-3d;}
#container1 .parent3{ height: 56px;
          -webkit-transition-property: all;
          -webkit-transition-duration: .5s;
          -webkit-transform: rotateX(-90deg);
          -webkit-transform-origin: top;
          -moz-transition-property: all;
          -moz-transition-duration: .5s;
          -moz-transform: rotateX(-90deg);
          -moz-transform-origin: top;
          -o-transition-property: all;
          -o-transition-duration: .5s;
          -o-transform: rotateX(-90deg);
          -o-transform-origin: top;
          transition-property: all;
          transition-duration: .5s;
          transform: rotateX(-90deg);
          transform-origin: top;}
#container1:hover .parent1{
    height: 111px;
    background-color: rgba(0,0,0,0.4);;}
#container1:hover .parent3    {
    transform: rotateX(0deg);
    height: 111px;
    background: #000;}
/*text-container*/
#container2 {
    width: 250px;
    height: 250px;
    position: relative;
    margin-bottom: 25px;
    border: 4px solid #ccc;
    float: left;
    background-image: url(../images/colover.jpg);}
#container2 .text-parent1 {
    height: 0;
    overflow: hidden;
    -webkit-transition-property: height;
    -webkit-transition-duration: .5s;
    -webkit-perspective: 1000px;
    -webkit-transform-style: preserve-3d;
    -moz-transition-property: height;
    -moz-transition-duration: .5s;
    -moz-perspective: 1000px;
    -moz-transform-style: preserve-3d;
    -o-transition-property: all;
    -o-transition-duration: .5s;
    -o-transform: rotateX(-90deg);
    -o-transform-origin: top;
    transition-property: height;
    transition-duration: .5s;
    perspective: 1000px;
    transform-style: preserve-3d;
}
#container2 .text-parent3 {
    height: 56px;
    -webkit-transition-property: all;
    -webkit-transition-duration: .5s;
    -webkit-transform: rotateX(-90deg);
    -webkit-transform-origin: top;
    -moz-transition-property: all;
    -moz-transition-duration: .5s;
    -moz-transform: rotateX(-90deg);
    -moz-transform-origin: top;
    -o-transition-property: all;
    -o-transition-duration: .5s;
    -o-transform: rotateX(-90deg);
    -o-transform-origin: top;
    transition-property: all;
    transition-duration: .5s;
    transform: rotateX(-90deg);
    transform-origin: top;}
#container2:hover .text-parent1 {
    height: 111px;}
#container2:hover .text-parent3 {
    -webkit-transform: rotateX(0deg);
    -moz-transform: rotateX(0deg);
    -o-transform: rotateX(0deg);
    transform: rotateX(0deg);
    height: 111px;}
#container3 {
    width: 250px;
    height: 250px;
    position: relative;
    border: 4px solid #ccc;
    float: left;
     margin-left: 10px;
     background: #cccccc;}
#container3 .slow-parent1 {
    height: 0;
    overflow: hidden;
    -webkit-transition-property: height;
    -webkit-transition-duration: .5s;
    -webkit-perspective: 1000px;
    -webkit-transform-style: preserve-3d;
    -moz-transition-property: height;
    -moz-transition-duration: .5s;
    -moz-perspective: 1000px;
    -moz-transform-style: preserve-3d;
    -o-transition-property: all;
    -o-transition-duration: .5s;
    -o-transform: rotateX(-90deg);
    -o-transform-origin: top;
    transition-property: height;
    transition-duration: .5s;
    perspective: 1000px;
    transform-style: preserve-3d;
    background: lightgreen;}
#container3 .slow-parent2 {
    background: lightblue;}
#container3 .slow-parent3 {
    height: 56px;
    background: pink;
    -webkit-transition-property: all;
    -webkit-transition-duration: .5s;
    -webkit-transform: rotateX(-90deg);
    -webkit-transform-origin: top;
    -moz-transition-property: all;
    -moz-transition-duration: .5s;
    -moz-transform: rotateX(-90deg);
    -moz-transform-origin: top;
    -o-transition-property: all;
    -o-transition-duration: .5s;
    -o-transform: rotateX(-90deg);
    -o-transform-origin: top;
    transition-property: all;
    transition-duration: .5s;
    transform: rotateX(-90deg);
    transform-origin: top;}
#container3:hover .slow-parent1 {
    height: 111px;}
#container3:hover .slow-parent3 {
    -webkit-transform: rotateX(0deg);
    -moz-transform: rotateX(0deg);
    -o-transform: rotateX(0deg);
    transform: rotateX(0deg);
    height: 111px;}
#container3 h2,
#container2 h2,
#container1 h2  { text-align: center; color: #fff;}