旋转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. iOS UIBezierPath知识介绍

    UIBezierPath是在画图,定制动画轨迹中都有应用. UIBezierPath有许多类方法,能够创建基本的曲线,比如利用一个rect创建一个椭圆path的方法:bezierPathWithOva ...

  2. liunx下安装MYSQL时需要安装的相关软件的作用

    2013年11月16日 14:18:39 This installs the package for MySQL server (mysql-community-server) and also pa ...

  3. canvas API ，通俗的canvas基础知识（六）

    这篇是canvas API系列的首尾之作,这篇以后,所有的canvas的属性和方法就将完了,哦,不对,应该是大部分常用的,还有部分不常用的属性和方法,因为种种原因,就不介绍了,后期的重点就是多写一点c ...

  4. python 的类变量和对象变量

    python是一种解释性的语言,任何变量可以在使用的时候才声明以及定义,也可以在程序运行的任何位置进行声明和定义新的变量. class Man(object): #直接定义的类的变量,属于类 #其中 ...

  5. 【mysql】执行mysql脚本

    来源:http://zhidao.baidu.com/link?url=p78PlTJZlheB4uSKCkmZApg-3qrTIBCS3yI5LbGJLEAnUuO3-4GE6dLqq1LWC_kn ...

  6. VirtualBox 虚拟 Ubuntu 的一些感想

    之前有说过最近在学习Shell,公司及家里的电脑目前都是Windows系统,进行shell学习主要是用一些模拟linux环境的软件,比如banbun.cygwin banbun的功能很强大,集成了oh ...

  7. linux shell的切换

    查看系统可用shell种类:(一般是bash shell) ➜ ~ chsh -l /bin/sh /bin/bash /sbin/nologin /bin/dash /bin/zsh 修改当前的sh ...

  8. 深入浅出TCP协议的三次握手过程

    TCP是主机对主机层的传输控制协议,提供可靠的连接服务,采用三次握手确认建立一个连接: 每一次TCP连接都需要三个阶段:连接建立.数据传送和连接释放.“三次握手”就发生在连接建立阶段. 1.三次握手( ...

  9. linux多种安装包格式的安装方法

    linux多种安装包格式的安装方法 一.rpm包安装方式步骤:1.找到相应的软件包,比如soft.version.rpm,下载到本机某个目录: 2.打开一个终端,su -成root用户: 3.cd s ...

  10. 北京网络赛G BOXES 状态压缩+有序BFS+高维数组判重

    #include <bits/stdc++.h> using namespace std; ]; ][]; ][][]; ][][][]; ][][][][]; ][][][][][]; ...