html鼠标经过图片旋转特效,当鼠标滑过图片时css怎么实现图片旋转后出现不同效果展示？...

浏览网页时，当鼠标滑过某一个图片，随即图片发生动态变化，这样的效果总是能让人很新奇，并且引人注目。那么如此酷炫的效果是怎么实现的呢？这个肯定是离不开强大的css3功能。不仅可以css3图片旋转也可以实现css旋转放大、css旋转90度、css图片旋转45度等特效。

那么本篇文章给大家介绍了关于鼠标滑过图片时出现旋转后不同特效的介绍。

具体代码示例如下：

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);

}

90度旋转

放大

旋转放大

上下左右移动

360度旋转

效果如下图：

希望本篇关于css旋转动画介绍，对需要的朋友有所帮助！