CSS3 아바타 회전 효과 구현 예시 공유

이 글에서는 아바타 회전 효과를 얻기 위해 주로 CSS3를 소개합니다. 편집자는 이것이 꽤 좋다고 생각합니다. 이제 여러분과 공유하고 참고할 것입니다. 편집자를 따라 살펴보겠습니다. 모두에게 도움이 되기를 바랍니다.

마우스를 놓았을 때의 효과:

마우스를 놓았을 때의 회전 효과:

전환: 모든 속성 변환이 2초 이내에 완료됨을 의미합니다. :rotate(360deg) ; 이미지가 360도 회전됨을 나타냅니다.

nbsp;html>

    
        <meta>
        <title></title>
        <style>
            img{
                border: #000 solid 2px;
                display: block;
                margin: 50px auto;
                border-radius: 50%;
                transition: all 2.0s;
            }
            img:hover{
                transform: rotate(360deg);
            }
        </style>
    
    
        <img  alt="CSS3 아바타 회전 효과 구현 예시 공유" >
    

관련 추천;

3D 변환 효과를 얻기 위한 HTML5 및 CSS3의 자세한 예

CSS 및 HTML 사용자 정의 체크박스 효과에 대한 자세한 설명

효과를 순서대로 표시하는 CSS3 다중 요소 구현 방법 정보

위 내용은 CSS3 아바타 회전 효과 구현 예시 공유의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!