<!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. C#超简单自定义事件

    我知道你为啥点进来,所以不要犹豫了,立刻马上果断创建控制台项目,直接复制下面精干短小而又强大的代码运行: using System; using System.Collections.Generic; ...

  2. 小甲鱼Python第二十讲课后习题---021

    笔记: 1.lambda表达式的作用: 1)Python写一些执行脚本时,使用lambda就可以省下定义函数的过程,比如说我们只是需要写一个简单的脚本来管理服务器时间,我们就不需要专门定义一个函数然后 ...

  3. js的作用域题

    ---恢复内容开始--- 1. var a = 12 function fn() { console.log(a) var a = 45; console.log(a) } fn() 2. funct ...

  4. vim编辑器显示行号

    Vim编辑器显示行号的设置 1. 显示行号 :set nu 2. 不显示行号 :set nonu :set nu :set nonu

  5. html表格以pdf格式导出到本地

    引入插件 jsPdf.js 以及 html2canvas.js,具体文件可上github找,实测可行html2canvas(document.getElementById("downBox& ...

  6. mysql 查询 练习题及答案

    CREATE DATABASE school;USE school;/*1.创建student表格*//*id为主键 非空 唯一 */CREATE TABLE student (id INT(10) ...

  7. 寻找真正的入口（OEP）--广义ESP定律

    1.前言 在论坛上看到很多朋友,不知道什么是ESP定律,ESP的适用范围是什么,ESP定律的原理是什么,如何使用ESP定律?看到了我在“”调查结果发现,大家对ESP定律很感兴趣,当然因为实在是太好用了 ...

  8. 如何用anysend发wirshark的报文

    可以复制 抓包的的报文的 hex txt文档  粘贴到 anysend 继续发送

  9. jmeter数据库连接配置

    一.实际试过的mysql配置 1.导入一个JDBC jar包(我是直接把jar包放在了jmeter的lib目录),包:mysql-connector-java-5.1.7-bin.jar 2.设置JD ...

  10. 保护url时效性和安全性的一种解决方案

    几乎都是同事小哥哥帮我铺路,给我参考链接,实现的理论方法以及知识,我只剩下看资料,敲代码,出错了也是他帮我看着一步步解释搞定过来的.嗯,大好人一枚. ok,思路: 是生成一个随机数放在url里面,当做 ...