<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>旋转菜单</title>
    <link rel="stylesheet" href="style7.css" type="text/css">
</head>
<body>
<div>
<img src="pic/sc17.png" alt="">
</div>
</body>
</html>

*{
    margin: 0;
    padding: 0;
}
img{
    width: 150px;
    height: 210px;
    border: 3px groove orange;
}
div{
    margin-left: auto;
    margin-right: auto;
    width: 150px;
    margin-top: 50px;
    animation: fz 6s infinite ease;
}
body{
    perspective:500px;
}
@keyframes fz{
    0%{
        transform: rotateX(45deg);

}
    20%{
        transform: rotateX(180deg);
    }
    40%{
        transform: rotateX(360deg);
    }
        60%{
        transform: rotateY(45deg);

}
    80%{
        transform: rotateY(180deg);
    }

90%{
        transform: rotateY(360deg);
    }

100%{
        transform: rotateY(360deg);
    }
}
}

html5css练习 旋转的更多相关文章

  1. Canvas绘图之平移translate、旋转rotate、缩放scale

    画布操作介绍 画布绘图的环境通过translate(),scale(),rotate(), setTransform()和transform()来改变,它们会对画布的变换矩阵产生影响. 函数 方法 描 ...

  2. Carousel 旋转画廊特效的疑难杂症

    疑难杂症 该画廊特效的特点就是前后元素有层级关系. 我想很多人应该看过或者用过这个插件carousel.js,网上也有相关的教程.不知道这个插件的原型是哪个,有知道的朋友可以告诉我. 该插件相对完美, ...

  3. jQuery可拖拽3D万花筒旋转特效

    这是一个使用了CSS3立体效果的强大特效,本特效使用jQuery跟CSS3 transform来实现在用户鼠标按下拖动时,环形图片墙可以跟随鼠标进行3D旋转动画. 效果体验:http://hovert ...

  4. css3制作旋转动画

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

  5. Android 旋转屏幕--处理Activity与AsyncTask的最佳解决方案

    一.概述 运行时变更就是设备在运行时发生变化(例如屏幕旋转.键盘可用性及语言).发生这些变化,Android会重启Activity,这时就需要保存activity的状态及与activity相关的任务, ...

  6. EasyPR--开发详解(4)形态学操作、尺寸验证、旋转等操作

    在上一篇深度分析与调优讨论中,我们介绍了高斯模糊,灰度化和Sobel算子.在本文中,会分析剩余的定位步骤. 根据前文的内容,车牌定位的功能还剩下如下的步骤,见下图中未涂灰的部分. 图1 车牌定位步骤 ...

  7. iOS----应用的旋转---Orientations

    此博文主要针对IOS应用, 是屏幕旋转相关问题的一个总结. 主要内容有: IOS5,6,7不同版的适配. 强制旋转和自动旋转. QQ : 1101819159 邮箱: GeekiVan@aliyun. ...

  8. 【CSS3动画】transform对文字及图片的旋转、缩放、倾斜和移动

    前言:之前我有写过CSS3的transform这一这特性,对于它的用法,还不是很透彻,今天补充补充,呵呵 你懂的,小司机准备开车了. a)再提一提transform的四个属性 ①旋转--->ro ...

  9. 关于android中调用系统拍照,返回图片是旋转90度

    转载博客:http://blog.csdn.net/walker02/article/details/8211628 项目开发中遇到的一个问题,对于三星手机在做手机照片选择时出现图片显示不正常,研究后 ...

随机推荐

  1. .net程序员面试小结(内附一些面试题和答案)

    今天下午去面试,面试官和HR小姐姐都很好,没有做面试题,用聊天的方式来交流技术,整个过程很轻松,从中也学到了很多知识. 下面就来总结一下面试过程. 一.深刻了解自己的简历 无论是HR还是技术面试人,首 ...

  2. DWM1000 定位上位机软件 以及 源码下载

    蓝点DWM1000 模块已经打样测试完毕,有兴趣的可以申请购买了,更多信息参见 蓝点论坛 正文: 经过一段学习,今天终于将定位软件编译成功,简单修改,可以正确读取串口的数据了. 主要修改点: 1 官方 ...

  3. rabbitmq应用

    #!/usr/bin/env python3 # -*- coding: utf-8 -*- """ @author: zengchunyun ""& ...

  4. HBase scan 时 异常 ScannerTimeoutException 解决

    org.apache.Hadoop.hbase.client.ScannerTimeoutException: 60622ms passed since the last invocation, ti ...

  5. js的一些

    // 1 定时器参数问题 无限个参数 /*setTimeout(function(num1,num2,num3,num4){ alert(num1+num2+num3+num4) },1000,1,2 ...

  6. LCA(包含RMQ)

    今天看了RMQ问题 ST的实质是动归 于是我来回顾一下LCA(的各种写法) 因为每次考试发现自己连LCA都写不好 费时 First of all, RMQ板子: [一维] #include<bi ...

  7. (76)Wangdao.com第十四天_JavaScript 正则表达式对象 RegExp

    RegExp Regular Expression,正则表达式是一种表达    文本模式(字符串结构)  的式子. 常常用来按照“给定模式”匹配文本.比如,正则表达式给出一个 Email 地址的模式, ...

  8. 安装Percona版本的MySQL主从复制

    准备两台虚拟机,按顺序执行1.1节的公共部分 1.1 首先安装 cmake # yum –y install cmake     //也需要安装gcc-c++,openssl openssl-deve ...

  9. css 中 zoom和transform:scale的区别(转载)

    一.IE和Chrome等浏览器与zoom 还在几年前,zoom还只是IE浏览器自己私有的玩具,但是,现在,除了FireFox浏览器,其他,尤其Chrome和移动端浏览器已经很好支持zoom属性了: z ...

  10. elasticsearch视频34季

    02_结构化搜索_在案例中实战使用term filter来搜索数据 课程大纲 1.根据用户ID.是否隐藏.帖子ID.发帖日期来搜索帖子 (1)插入一些测试帖子数据 POST /forum/articl ...