Rumah >hujung hadapan web >tutorial css >当鼠标滑过图片时css怎么实现图片旋转后出现不同效果展示？
当鼠标滑过图片时css怎么实现图片旋转后出现不同效果展示？
- 藏色散人asal
- 2018-08-09 17:44:594301semak imbas
浏览网页时，当鼠标滑过某一个图片，随即图片发生动态变化，这样的效果总是能让人很新奇，并且引人注目。那么如此酷炫的效果是怎么实现的呢？这个肯定是离不开强大的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旋转动画介绍，对需要的朋友有所帮助！
Atas ialah kandungan terperinci 当鼠标滑过图片时css怎么实现图片旋转后出现不同效果展示？. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：CSS3中display属性的Flex布局的简单介绍Artikel seterusnya：怎么用css制作箭头？（不同方向箭头代码示例）