Is it possible to get an animation by pressing a button using only html and css?

Question

I have a fip animation over a card as you can see at this codepen. I would like when you pressing the view-details button the card rotates 180 degrees. ¿Is it possible to get it using only html and css without using javascritp?

My html code:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Card Flipped</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta content="A fully featured admin theme which can be used to build CRM, CMS, etc." name="description" />
        <meta content="Coderthemes" name="author" />
        <!-- App favicon -->
        <link rel="shortcut icon" href="assets/images/favicon.ico">

        <!-- App css -->
      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    </head>

    <body>

        <!-- Begin page -->
        <div class="wrapper">
                        <div class="row">
                            <div class="col-md-6 col-lg-3">

                                <!-- Simple card -->
                                  <div class="flip-container" >
                             <div class="flipper">
                             <div class="front">
                                <!-- front content -->
                                <div class="card d-block">
                                      <img class="card-img-top" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ8MjPXuGsKGugRrvrD9YQtR_nZD6Ka4Q_7ZpyzJV2TEPtfadpP" alt="Card image cap" height="180" weight="80">
                                    <div class="card-body">
                                        <h5 class="card-title">Introduction to particle physics</h5>
                                        <p class="card-text">Some quick example text to build on the card title and make
                                            up the bulk of the card's content. Some quick example text to build on the card title and make up.</p>
                                        <a href="javascript: void(0);" class="btn btn-primary">Buy</a>
                                        <a href="javascript: void(0);" class="btn btn-primary view-details">View Details</a>
                                    </div> <!-- end card-body-->
                                </div> <!-- end card-->
                             </div>

                                    <div class="back">
                                        <h1>Do you like it?</h2><!-- back content -->
                                    </div>
                                </div>
                            </div>

        </div>
        <!-- END wrapper -->

        <script src="assets/js/app.min.js"></script>
    </body>
</html>

My css code:

    /* flip the pane when hovered */
.btn-primary { background: red;}  

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

/*
.view-details:hover .flipper, .view-details.hover .flipper {
    transform: rotateY(180deg);
  }
*/

.flip-container, .front, .back { /*Attention*/
    width: 280px;
    height: 480px;
}


/* flip speed goes here */
.flipper {
    transition: 0.6s;
    transform-style: preserve-3d;

    position: relative;
}

/* hide back of pane during swap */
.front, .back {
    backface-visibility: hidden;

    position: absolute;
    top: 0;
    left: 0;
}

/* front pane, placed above back */
.front {
    z-index: 2;
    /* for firefox 31 */
    transform: rotateY(0deg);
}

/* back, initially hidden pane */
.back {
    transform: rotateY(180deg);
}

I recently put a similar post, but the difference was that the animation occurred when hovering on the button called view-details.

not with that html structure - the button would need to be before the card and a sibling of it if you only wanted to use css, although you could add a hidden checkbox before the card and turn the button into a label and then run the animation on `:checked + .card` — Pete, Nov 28 '18 at 13:08

score 1 · Accepted Answer · answered Nov 28 '18 at 13:10

1

Course it is possible, you can change a checkbox to look like a button and while the checkbox is ticked your animation runs. Here I found an interesting,though basical , tutorial

answered Nov 28 '18 at 13:10

Leonardo Silvagni

153
7

Is it possible to get an animation by pressing a button using only html and css?

1 Answers1