旋转1：

<!DOCTYPE HTML>

<html lang="en-US">

<head>

    <meta charset="UTF-8">

    <title></title>

</head>

<style type="text/css">

    #box

    {

        background:red;

        color:#fff;

        width:100px;

        height:100px;

    }

    #box:hover{

          transform: rotateY(360deg);

          transition: .5s all;

          -webkit-transition: .5s all;

          -moz-transition: .5s all;

          -o-transition: .5s all;

          -ms-transition: .5s all;

          transition-timing-function: ease-out;
        -moz-transition-timing-function: ease-out; /* Firefox 4 */
        -webkit-transition-timing-function: ease-out; /* Safari 和 Chrome */
        -o-transition-timing-function: ease-out; /* Opera */

    }

</style>

<body>

    <div id="box">Lee</div>

</body>

</html>

旋转2

神坑：必须当图标的(字体)大小与div一致时，才会原地旋转，过大或者过小都会异常旋转

<!DOCTYPE html>

<html>

<head>

     <meta charset="utf-8">

    <title></title>

    <style type="text/css">

       .close {

            height:auto;

            width:auto;

            position: absolute;

            transition: .8s ease all;

            -moz-transition: .8s ease all;

            -webkit-transition: .8s ease all;

        } 

        .rotate:hover {

            transform: rotate(360deg);

            -moz-transform: rotate(360deg);

            -webkit-transform: rotate(360deg);}

    </style>

</head>

<body>

    <div class="close rotate">

        <!-- 必须当图标的(字体)大小与div一致时(或者DIV的宽高为auto时)，才会原地旋转，过大或者过小都会异常旋转 -->

        <span style="font-size:2rem">×</span>

    </div>

</body>

</html>

旋转2

<!DOCTYPE html>

<html>

<head>

     <meta charset="utf-8">

    <title></title>

    <style type="text/css">

       .rotate_default {

            height:auto;

            width:auto;

            position: absolute;

            transition: .8s ease all;

            -moz-transition: .8s ease all;

            -webkit-transition: .8s ease all;

        }

        /*

        .rotate:hover {

            transform: rotate(360deg);

            -moz-transform: rotate(360deg);

            -webkit-transform: rotate(360deg);

        }*/

    </style>

</head>

<body>

    <div class="rotate_default rotate">

        <!-- 必须当图标的(字体)大小与div一致时(或者DIV的宽高为auto时)，才会原地旋转，过大或者过小都会异常旋转 -->

        <span style="font-size:2rem">×</span>

    </div>

    <script src="https://cdn.bootcss.com/jquery/1.9.1/jquery.min.js"></script>

    <script>

        $(function(){

            var cir = Math.floor(Math.random()*5) + 1;

            var rotate = "rotate(" + cir * 180 + "deg)";

            console.log(rotate);

            $(".rotate").css("transform",rotate);

        })

    </script>

</body>

</html>

通过jquery旋转

Css3 - 动画旋转的更多相关文章

  1. CSS3动画旋转——（图片360°旋转）

    今天在重构网页特效的时候,想着用到一个css3的旋转特效.简单来一个demo. html <div class="box"> <img src="./y ...

  2. css3制作旋转动画

    现在的css3真是强大,之前很多动画都是用jq来实现,但是css3制作的动画要比jq实现起来简单很多,今天呢,我自己也写了一个css旋转动画和大家分享.效果如下面的图片 思路:1.制作之前呢,我们先来 ...

  3. 用css3制作旋转加载动画的几种方法

    以WebKit为核心的浏览器,例如Safari和Chrome,对html5有着很好的支持,在移动平台中这两个浏览器对应的就是IOS和Android.最近在开发一个移动平台的web app,那么就有机会 ...

  4. 鼠标HOVER时区块动画旋转变色的CSS3样式掩码

    鼠标hover时区块动画旋转变色的css3样式掩码<!DOCTYPE html> <html> <head> <meta charset="utf- ...

  5. css3动画使用技巧之—border旋转时的应用。

    <html> <head> <title>css3动画border旋转时的应用.</title> <meta charset="UTF- ...

  6. css3动画应用-音乐唱片旋转播放特效

    css3动画应用-音乐唱片旋转播放特效 核心点: 1.设置图片为圆形居中,使图片一直不停旋转. 2.文字标题(潘玮柏--反转地球)一直从左到右不停循环移动. 3.点击图标,音乐暂停,图片停止旋转:点击 ...

  7. CSS3动画制作

    CSS3动画制作 rotate 绕中心旋转 fadeInPendingFadeOutUp 先渐现,停留2s,再向上滑动并逐渐消失 fadeInUp2D 向上滑动并渐现, 因Animate.css的fa ...

  8. 用CSS3动画，让页面动起来

    以前就听说过有个库,叫animate.css,但是自己并没有在实际项目中使用过,这次正好要做个招聘页面,得以利用一下这个库,在经常会卡顿的UC浏览器中也能流畅执行. 扫描下面的二维码,可以看到在线的d ...

  9. 用CSS3动画特效实现弹窗效果

    提示:如果大家觉得本篇实现的弹窗效果有用,可持续关注.接下会添加更多效果并且封装成插件,这样使用就方便了.效果查看: https://heavis.github.io/hidialog/index.h ...

随机推荐

  1. Greedy:Stall Reservations(POJ 3190)

    牛挤奶 题目大意:一群牛很挑剔,他们仅在一个时间段内挤奶,而且只能在一个棚里面挤,不能与其他牛共享地方,现在给你一群牛,问你如果要全部牛都挤奶,至少需要多少牛棚? 这一题如果把时间区间去掉,那就变成装 ...

  2. javascript首尾反转字符

    var my_str="Welcome to www.sharejs.com" var i=my_str.length; i=i-1; for (var x = i; x > ...

  3. hp unix_ssh

    http://www.cyberciti.biz/faq/howto-hpux-sshd-service-startup-shutdown/ http://searchnetworking.techt ...

  4. p168习题

  5. Java Hour4

    有句名言,叫做10000小时成为某一个领域的专家.姑且不辩论这句话是否正确,让我们到达10000小时的时候再回头来看吧. 本文作者Java 现经验约为3 Hour,请各位不吝赐教. Hour4 继承用 ...

  6. html 表单 dom 注意跟表单的name值一致

    html 表单 dom 注意跟表单的name值一致 <script type="text/javascript"> function checkForm() { var ...

  7. Sonar+Hudson+Maven构建系列之二：迁移Sonar

    摘要:由于昨天在一台机器上安装的东西太多了,导致Linux机器上非常卡,一台Linux负担了jira, fisheye, confluence, sonar, hudson, mysql 等等,本来已 ...

  8. 免费电子书：使用VS Online敏捷管理开源项目

    今天推荐的是一本由微软出版社发布的免费电子书,涉及的话题是如何在Visual Studio Online中基于敏捷的思想来管理开源项目. 本书的几位作者(自称ALM领域的游侠),给大家分享了在一个敏捷 ...

  9. 使用pm2常见问题

    一.日志 1.pm2 的log怎么查看?(安装pm2后默认日志的路径为~/.pm2/),可以通过pm2 show (name)来查看某个进程下的日志地址 2.修改日志的输出路径,通过写一个程序启动的配 ...

  10. nodeAPI--FS

    fs是唯一一个同时提供同步和异步API的模块: 读取文件夹文件名,数组形式返回: var fs = require('fs'); //async fs.readdir('./',function(er ...