>  기사  >  웹 프론트엔드  >  CSS3 아바타 회전 효과 구현 예시 공유

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

小云云
小云云원래의
2017-12-19 13:11:512821검색

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

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

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.