hitechfocus

CSS 3D Folding Animation - Demo

Discussion in 'CSS' started by Maskters, May 27, 2015. Lượt xem: 1,908

  1. Maskters

    Maskters Administrator Staff Member

    Google Plus cung cấp vô số nguồn cảm hứng cho các nhà phát triển giao diện website đặc biệt là khi nói đến các CSS và JavaScript. 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
    [​IMG]

    HTML container1 - Demo

    HTML:
    <div id="wraper-content">
            <div id="container1">
                <div class="parent1">
                    <div class="parent2">
                        <div class="parent3">
                            <img src="http://davidwalsh.name/demo/GoogleTestMap.png" style="opacity: .7;">
                        </div>
                    </div>
                </div>
                <h2>container1 </h2>
            </div>

    HTML container2 - Demo

    HTML:
    <div id="container2">
                <div class="text-parent1">
                    <div class="text-parent2">
                        <div class="text-parent3" style="color: #fff;background: rgba(0, 0, 0, .5)">
                            <span style="color: #fff; font-size: 24px; display: block;
                             padding: 20px 0 0 20px; 1px 1px 0 rgba(0, 0, 0, 0.25)">
                             hitechfocus.com
                             </span>
                            <span style="color: #fff; font-size: 16px; display: block;
                             padding: 20px 0 0 100px; 1px 1px 0 rgba(0, 0, 0, 0.25)">
                              hitechfocus.com
                              </span>
                        </div>
                    </div>
                </div>
                <h2>container2 </h2>
            </div>

    HTML container3 - Demo

    HTML:
    <div id="container3">
            <div class="slow-parent1">
                <div class="slow-parent2">
                    <div class="slow-parent3">
                        hitechfocus.com
                    </div>
                </div>
            </div>
            <h2>container3 </h2>
        </div>

    CSS

    HTML:
    #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;}
    Tuy nhiên khi sử dụng các bạn cũng nên chú ý vì có thể một số trình duyệt chưa hỗ trợ đầy đủ HTML5, cho nên chúng ta cần những thuộc tính -webkit, -moz, -o sẽ giúp bạn khắc phục vấn đề về hiển trị trên các trình duyệt khác nhau.
    author

    About the author

    Hey, my name is Maskters (T.A). I´m a Web Developer but love graphic design from KHANH HOA and I'm the creator of Hitechfocus.com .
    Last edited: Jul 3, 2015
    Hacker-Hitechfocus likes this.
  2. Hacker-Hitechfocus

    Hacker-Hitechfocus Administrator

    thêm ảnh demo thì hay :D
    Maskters likes this.
  3. Maskters

    Maskters Administrator Staff Member

Share This Page