CSS를 사용하여 이미지를 회전하고 마우스를 이미지 위에 놓을 때 다른 효과를 표시하는 방법은 무엇입니까?
- 藏色散人원래의
- 2018-08-09 17:44:594196검색
웹을 검색할 때 특정 사진 위로 마우스를 이동하면 사진이 동적으로 변경됩니다. 이 효과는 항상 새롭고 눈길을 끕니다. 그렇다면 어떻게 이런 멋진 효과를 얻을 수 있을까요? 이것은 확실히 강력한 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를 사용하여 이미지를 회전하고 마우스를 이미지 위에 놓을 때 다른 효과를 표시하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.