旋转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 和 Android 中的后台运行问题

    后台机制的不同,算是iOS 和 Android的一大区别了,最近发布的iOS7又对后台处理做了一定的更改,找时间总结一下编码上的区别,先做个记录. 先看看iOS的把,首先需要仔细阅读一下Apple的官 ...

  2. MySQL 全文搜索支持, mysql 5.6.4支持Innodb的全文检索和类memcache的nosql支持

    背景:搞个个人博客的全文搜索得用like啥的,现在mysql版本号已经大于5.6.4了也就支持了innodb的全文搜索了,刚查了下目前版本号都到MySQL Community Server 5.6.1 ...

  3. Linux下挂载NTFS格式的U盘或硬盘

    我们知道在Linux下挂载fat32的U盘非常容易,使用mount /dev/drive_name /mnt/指定目录这样就可以挂载了,但是如果U盘或者硬盘的格式是NTFS的话,那么Linux是不能识 ...

  4. Python——内置类型

    Python定义了丰富的数据类型,包括: 数值型:int, float, complex 序列:(iterable) str, unicode, tuple, list, bytearray, buf ...

  5. 【JAVA、C++】LeetCode 015 3Sum

    Given an array S of n integers, are there elements a, b, c in S such that a + b + c = 0? Find all un ...

  6. JS控制DIV隐藏显示

    转载自:http://blog.sina.com.cn/s/blog_6c3a67be0100ldbe.html JS控制DIV隐藏显示 一,需求描述: 现在有3个DIV块,3个超链接,需要点击一个链 ...

  7. IncDec Sequence（codevs 2098）

    题目描述 Description 给定一个长度为n的数列{a1,a2...an},每次可以选择一个区间[l,r],使这个区间内的数都加一或者都减一. 问至少需要多少次操作才能使数列中的所有数都一样,并 ...

  8. python基础——函数的参数

    python基础——函数的参数 定义函数的时候,我们把参数的名字和位置确定下来,函数的接口定义就完成了.对于函数的调用者来说,只需要知道如何传递正确的参数,以及函数将返回什么样的值就够了,函数内部的复 ...

  9. scp 指定端口

    scp -P33033 zp.tar root@111.222.123.01:/da1/web/zhaopin.shouhuobao.com #sshd的端口指定的是33033

  10. LeetCode之Balanced Binary Tree 平衡二叉树

    判定一棵二叉树是不是二叉平衡树. 链接:https://oj.leetcode.com/problems/balanced-binary-tree/ 题目描述: Given a binary tree ...