使用CSS3制作鼠标滑过图片或图层时图片对象产生不同的旋转效果

稿源：互联网 2018-09-04 23:13:58 点击： 739 撤稿纠错

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

以下讨论的是和CSS3 鼠标滑过旋转相关的使用CSS3制作鼠标滑过图片或图层时图片对象产生不同的旋转效果教程文章，内容是本站精心挑选整理的教程，希望对广大的网友给到帮助,下面是详细内容：

脚本代码(For Alixixi.com)如下:

<!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>

关于使用CSS3制作鼠标滑过图片或图层时图片对象产生不同的旋转效果的内容写到这里就结束啦，您可以收藏本页网址http://www.alixixi.com/web/ a/2018090495995.shtml方便下次再访问哦。

·上一篇： 利用css3的Flex属性布局制作带CSS圆角的九宫格排列样式
·下一篇： 使用CSS3中display属性的Flex参数进行布局的教程案例

文章分类LIST >>返回首页

排行总榜

Adobe Illustrator运
一款CSS3制作的带尖角的按钮实例代
讨论自定义滚动条样式分步html&g
目前主流浏览器对于HTML5与CSS
通过HTML5调用播放视频的一些注意
详解html5语义化css代码的体验
关于HTML5中通过CSS3实现的图
用HTML5+css3制作HTML5验
分享一个HTML5 + JavaScr
继续收集一组CSS3实例资源和开发实

使用CSS3制作鼠标滑过图片或图层时图片对象产生不同的旋转效果

文章分类LIST >>返回首页

最新游戏

最新新闻

使用CSS3制作鼠标滑过图片或图层时 图片对象产生不同的旋转效果

文章分类LIST >>返回首页

最新游戏

最新新闻

使用CSS3制作鼠标滑过图片或图层时图片对象产生不同的旋转效果