How to do onclick in CSS to do transition on image?


Tags: css,css3,rotation,css-transitions,transition

Problem :

I'm trying to rotate image by 180 degrees. The code below is working on hover, how can I do this when the image is clicked?

Is there a simple way to do this by using CSS?

CSS

img {
    display: block;
}

.rotate {
    -webkit-transition-duration: 2s;
    -moz-transition-duration: 2s;
    -o-transition-duration: 2s;
    transition-duration: 2s;
    -webkit-transition-property: -webkit-transform;
    -moz-transition-property: -moz-transform;
    -o-transition-property: -o-transform;
    transition-property: transform;
}

.rotate:hover {
    -webkit-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg);
}

HTML

<body>
   <img class="rotate" src="/images/object.png" />
</body>

JSFiddle



Solution :

You Can use the :focus on your rotate class which will make your image rotate on click, but be careful, clicking outside will lead to loosing the effect.

Below The Snippet.

img {
    display: block;
margin: 20px;
}

.rotate {
    -webkit-transition-duration: 2s;
    -moz-transition-duration: 2s;
    -o-transition-duration: 2s;
    transition-duration: 2s;
    -webkit-transition-property: -webkit-transform;
    -moz-transition-property: -moz-transform;
    -o-transition-property: -o-transform;
    transition-property: transform;
    outline: 0;
}

.rotate:focus {
   -webkit-transform: rotate(180deg);
   -ms-transform: rotate(180deg);
    transform: rotate(180deg);
}
<body>
    <img class="rotate" src="https://www.google.com/images/srpr/logo11w.png" tabindex="1" />
</body>


    CSS Howto..

    SCSS / Sass: How do i change a mixin to output specific CSS?

    How to center horizontally a position: absolute elment on a position: fixed container

    How to make a HTML list appear horizontally instead of vertically using CSS only?

    how to do external scripting?

    How to handle javascript & css files across a site?

    How to add css for div tag and Panel in asp

    How to select only the “parent” div of an image

    How do I apply a max-width to an input field form-control with a trailing secondary button in Bootstrap 3?

    How to make image control button for each image inside the div using css and js?

    How to make responsive horizontal grids? [closed]

    How to define variable with CSS value from HTML tag? [closed]

    how to align an element but keep the space it left reserved

    How to change placeholder color for number input? (Firefox)

    How can I create a full height responsive horizontal scrolling list of images with CSS

    With media queries, how to prevent the browser from downloading a smaller background-image if a larger image has already been downloaded?

    How to display a box of color beside a table row using CSS?

    How to set input text color, but not placeholder color, in IE11

    How to have responsive widths for labels and inputs using css

    how to run html$css$js files locally on browser [closed]

    JQuery/CSS - How i can set imagem full size of div

    How to remove extra space in navigation bar? [duplicate]

    How to customize post excerpt css

    html, css - cursor - how to change default image for pointer

    How do you make a menu scroll with the page, but leave the logo

    How to change a defined value to a unspecified value by css?

    How to scroll through a div before the page scrolls?

    How do I align these pictures vertically?

    Bootstrap css, how to make always visible navbar-toggle?

    How to spin css cube each after each [closed]

    How to make video responsive for all the screen sizes?