旋转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. LLVM,Clang

    在使用xcode时常常会遇到这2个概念,今天总结一下. wiki中关于llvm的描述: LLVM提供了完整編譯系統的中間層,它會將中間語言(IF, Intermediate form)從編譯器取出與最 ...

  2. codeforces A. Group of Students 解题报告

    题目链接:http://codeforces.com/problemset/problem/357/A 题目意思:将一堆人分成两组:beginners 和 intermediate coders .每 ...

  3. Human Gene Functions（poj 1080）

    题目大意是:给定两组DNA序列,要你求出它们的最大相似度 每个字母与其他字母或自身和空格对应都有一个打分,求在这两个字符串中插入空格,让这两个字符串的匹配分数最大 /* 思路是很好想的,设f[i][j ...

  4. java基础知识回顾之java Thread类学习（十二）-- 线程中断

    官方文档翻译: 如果本线程是处于阻塞状态:调用线程的wait(), wait(long)或wait(long, int)会让它进入等待(阻塞)状态,或者调用线程的join(), join(long), ...

  5. SecureCRT乱码

    http://jingyan.baidu.com/article/948f59245be128d80ff5f9aa.html

  6. snmp监控磁盘

    http://www.it165.net/os/html/201209/3438.html https://sourceforge.net/p/net-snmp/mailman/message/168 ...

  7. hrbustoj 1161:Leyni（树状数组练习）

    LeyniTime Limit: 3000 MS Memory Limit: 65536 KTotal Submit: 260(59 users) Total Accepted: 80(55 user ...

  8. thinkphp的mvc理解

    ThinkPHP支持多层设计. .模型层Model 使用多层目录结构和命名规范来设计多层的model,例如在项目设计中如果需要区分数据层,逻辑层,服务层等不同的模型层可以在模块目录下创建Model,L ...

  9. ThinkPHP的增、删、改、查

    一.创建操作 在ThinkPHP使用add方法新增数据到数据库. 使用方法如下: $User = M()->; $data[););')->delete();

  10. （转载）数据库表设计-水电费缴费系统（oracle）

    水电缴费管理系统数据表设计 SQL建表脚本: 1 --建表 2 --管理人员表 admin 3 create table admin( 4 admin_id varchar2(3) not null, ...