旋转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. Sql Server 深入的探讨锁机制

    一: 当select遇到性能低下的update会怎么样? 1. 还是使用原始的person表,插入6条数据,由于是4000字节,所以两条数据就是一个数据页,如下图: 1 DROP TABLE dbo. ...

  2. linux下如何设置vip（虚拟ip）

    在做HA的时候需要为服务器设计虚拟IP,也就是一个主机对应多个IP地址?刚听起来好神奇,原来这样也是可能的看了下面的这个链接 自己配了一下http://hi.baidu.com/pbottle/ite ...

  3. DOS 循环读取txt每一行内容

    在命令行窗口中输入: for /f %i in (f:\mydata.txt) do echo %i 如果要是写成批处理文件run.bat for /f %%i in (f:\mydata.txt) ...

  4. static_cast, dynamic_cast, const_cast

    http://www.cnblogs.com/chio/archive/2007/07/18/822389.html 首先回顾一下C++类型转换: C++类型转换分为:隐式类型转换和显式类型转换 第1 ...

  5. jQuery 重新温习 遗忘知识点

    解决jQuery和其他库的冲突 当把jQuery和其他JavaScript库(例如Prototype.MooTools或YUI)一起使用时 <script> jQuery.noConfli ...

  6. mysql事务处理的意义

    MySQL的事务支持不是绑定在MySQL服务器本身,而是与存储引擎相关 1.MyISAM:不支持事务,用于只读程序提高性能 .InnoDB:支持ACID事务.行级锁.并发 .Berkeley DB:支 ...

  7. 为什么是List list = new ArrayList() 而不直接用ArrayList

    为什么是List list = new ArrayList(),而不直接用ArrayList? 编程是要面向对象编程,针对抽象(接口),而非具体.List 是接口,ArrayList是实现. 实现Li ...

  8. MyEclipse导入Maven项目

    转自:http://blog.csdn.net/xuelu198708/article/details/8561115 导入分两种方法: 1.使用MyEclipse的普通工程导入,步骤如下: 1> ...

  9. XMLSAX解析

    * HTML不区分大小写,XML区分大小写 * 用浏览器打开xml文件,判断xml文件是否有错 * xml与html的区别 1:xml的标记可以自定义,但是html标记不可以定义.<studen ...

  10. Logback常用配置详解

    logback是一套日志框架,由log4j的优化版,由同一个作者开发,在速度和性能上都超过其他日志框架,再结合slf4j,已成为当前最流行的日志框架. Logback最常用就是在classpath定义 ...