CSS를 사용하여 이미지를 회전하고 마우스를 이미지 위에 놓을 때 다른 효과를 표시하는 방법은 무엇입니까?-CSS 튜토리얼-php.cn

CSS를 사용하여 이미지를 회전하고 마우스를 이미지 위에 놓을 때 다른 효과를 표시하는 방법은 무엇입니까?

藏色散人

풀어 주다： 2018-08-09 17:44:59

원래의

4296명이 탐색했습니다.

웹을 검색할 때 특정 사진 위로 마우스를 이동하면 사진이 동적으로 변경됩니다. 이 효과는 항상 새롭고 눈길을 끕니다. 그렇다면 어떻게 이런 멋진 효과를 얻을 수 있을까요? 이것은 확실히 강력한 CSS3 기능과 분리될 수 없습니다. CSS3 이미지를 회전시킬 수 있을 뿐만 아니라 CSS 회전 증폭, CSS 회전 90도, CSS 이미지 회전 45도와 같은 특수 효과도 얻을 수 있습니다.

그래서 이번 글에서는 사진 위로 마우스를 슬라이드할 때 회전 후 나타나는 다양한 특수 효과를 소개하겠습니다.

구체적인 코드 예시는 다음과 같습니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css旋转效果测试</title>
    <style type="text/css">
        div{
            width:120px;
            height:120px;
            line-height:120px;
            margin: 20px;
            background-color: #5cb85c;
            float: left;
            font-size: 12px;
            text-align: center;
            color:#000;
        }
        /*效果一：90°旋转 修改rotate(旋转度数)*/
 .img1 {
            transition: All 0.4s ease-in-out;
            -webkit-transition: All 0.4s ease-in-out;
            -moz-transition: All 0.4s ease-in-out;
            -o-transition: All 0.4s ease-in-out;
        }
        .img1:hover {
            transform: rotate(90deg);
            -webkit-transform: rotate(90deg);
            -moz-transform: rotate(90deg);
            -o-transform: rotate(90deg);
            -ms-transform: rotate(90deg);
        }

        /*效果二：放大 修改scale(放大的值)*/
 .img2 {
            transition: All 0.4s ease-in-out;
            -webkit-transition: All 0.4s ease-in-out;
            -moz-transition: All 0.4s ease-in-out;
            -o-transition: All 0.4s ease-in-out;
        }

        .img2:hover {
            transform: scale(1.2);
            -webkit-transform: scale(1.2);
            -moz-transform: scale(1.2);
            -o-transform: scale(1.2);
            -ms-transform: scale(1.2);
        }
        /*效果三：旋转放大 修改rotate(旋转度数) scale(放大值)*/
 .img3 {
            transition: All 0.4s ease-in-out;
            -webkit-transition: All 0.4s ease-in-out;
            -moz-transition: All 0.4s ease-in-out;
            -o-transition: All 0.4s ease-in-out;
        }

        .img3:hover {
            transform: rotate(360deg) scale(1.2);
            -webkit-transform: rotate(360deg) scale(1.2);
            -moz-transform: rotate(360deg) scale(1.2);
            -o-transform: rotate(360deg) scale(1.2);
            -ms-transform: rotate(360deg) scale(1.2);
        }
        /*效果四：上下左右移动 修改translate(x轴,y轴)*/
 .img4 {
            transition: All 0.4s ease-in-out;
            -webkit-transition: All 0.4s ease-in-out;
            -moz-transition: All 0.4s ease-in-out;
            -o-transition: All 0.4s ease-in-out;
        }

        .img4:hover {
            transform: translate(0, -10px);
            -webkit-transform: translate(0, -10px);
            -moz-transform: translate(0, -10px);
            -o-transform: translate(0, -10px);
            -ms-transform: translate(0, -10px);
        }
        /*效果五：360°旋转 修改rotate(旋转度数)*/
 .img5 {
            transition: All 0.4s ease-in-out;
            -webkit-transition: All 0.4s ease-in-out;
            -moz-transition: All 0.4s ease-in-out;
            -o-transition: All 0.4s ease-in-out;
        }
        .img5:hover {
            transform: rotate(360deg);
            -webkit-transform: rotate(360deg);
            -moz-transform: rotate(360deg);
            -o-transform: rotate(360deg);
            -ms-transform: rotate(360deg);
        }
    </style>
</head>
<body>
<div class="img1">90度旋转 </div>
<div class="img2">放大</div>
<div class="img3">旋转放大</div>
<div class="img4">上下左右移动 </div>
<div class="img5">360度旋转 </div>
</body>
</html>

로그인 후 복사

효과는 다음과 같습니다.

CSS를 사용하여 이미지를 회전하고 마우스를 이미지 위에 놓을 때 다른 효과를 표시하는 방법은 무엇입니까? 이 CSS 회전 애니메이션 소개가 도움이 필요한 친구들에게 도움이 되기를 바랍니다!