How to correctly specify the property transform: rotate (45deg) with: hover so that the block is spinning and the icon inside is not? enter image description here

    2 answers 2

    Pseudo-elements are best suited :before or :after . Which we will turn. You can never wrap the icon in the block. The principle from the example will be clear.

     * { margin: 0; padding: 0; -webkit-box-sizing: border-box; box-sizing: border-box; } body { min-height: 100vh; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } div { display: block; margin: 0 auto; position: relative; text-align: center; width: 100px; height: 100px; line-height: 100px; color: pink; font-size: 2em; } div:before { content: ''; position: absolute; left: 0; top: 0; right: 0; bottom: 0; border: 2px solid lightgrey; -webkit-transition: all .4s cubic-bezier(0.24, 1.8, 0.68, 0.98); -o-transition: all .4s cubic-bezier(0.24, 1.8, 0.68, 0.98); transition: all .4s cubic-bezier(0.24, 1.8, 0.68, 0.98); -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); } div:hover:before { border: 2px solid pink; -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); } 
     <link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <div><i class="fa fa-heart-o" aria-hidden="true"></i></div>

    • In the sense of "can"? It is necessary, otherwise it will always spin, as it is an element embedded in a block. If, of course, with a hover, you do not indicate this icon to spin in the other direction, but these are crutches on a trifle. - VostokSisters
    • @VostokSisters To display the icon itself, the <i> uses the :before pseudo-element. If you make a square of the pseudo-element :after (the same tag), then you can twist it, and not the whole structure. - Alexey Giryayev

     * { margin: 0; padding: 0; } html, body { width: 100%; height: 100%; background: #272727; } #wrapper { width: 100px; height: 100px; background: transparent; position: relative; margin: 30px 0 0 30px; } #logo { width: 100px; height: 100px; background: url(http://icons.veryicon.com/png/Media/Free%20Flat%20Multimedia/Dslr%20Camera.png); background-size: cover; position: absolute; } #block { width: 100px; height: 100px; background: transparent; position: absolute; border: 3px solid red; transition:all .3s; } #wrapper:hover #block { width: 100px; transition:all .3s; transform: rotate(45deg); height: 100px; background: transparent; position: absolute; border: 3px solid red; } 
     <div id="wrapper"> <div id="logo"></div> <div id="block"></div> </div>

    • It is necessary to explain the essence or what is clear? - Air