The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS CSS transform:rotate iPhone problems

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
  • #167416

    Hello all. I’m having a problem with CSS transform: rotate, specifically on iPhone/touch devices. I’ve created buttons that rotate on hover, then when clicked, advance to the corresponding product slide. The buttons are links that contain background images, wrapped in divs.

    Of course, this doesn’t matter on touch devices. However, the buttons will not show on iPhone touchscreens when rotate is applied on hover. When I remove rotate, the buttons are visible. The code:

        .thumbnail-wrapper {
                    -webkit-transition: all .25s ease;
                    -moz-transition: all .25s ease;
                    -ms-transition: all .25s ease;
                    -o-transition: all .25s ease;
                    transition: all .25s ease;
    .thumbnail-wrapper:hover {
                    -webkit-transform: rotate(360deg); 
                    -moz-transform: rotate(360deg); 
                    -o-transform: rotate(360deg);
                    -ms-transform: rotate(360deg);

    Does anyone know of a workaround? I’d really like to keep this effect. Thanks.

    Alan C

    Well an option would be to put these styles inside of a media query for anything larger than the iPhone screen. That should prevent it from rendering in the final styles. If you put it up someplace like codepen I could delve a bit deeper if this doesn’t work.


    i just started playing with @media stuff, so I’ll try that. If I have problems, I’ll use Codepen if you don’t mind helping. I have to say, I’ve been a procrastinator on delving into fully responsive (anything more than flexible).

    Thanks so much, Alan!

Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘CSS’ is closed to new topics and replies.