<!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. 根据文件大小自动判断单位B,KB,MB,GB

    <php> /** * 文件大小格式化 * @param integer $size 初始文件大小,单位为byte * @return array 格式化后的文件大小和单位数组,单位为by ...

  2. (61)Wangdao.com第十天_JavaScript 立即执行函数

    1. 立即执行函数 创建完了就执行,只执行完就不再执行了. ( function(){} )(); 例 ( function(a,b){ alert("Hello ,我是一个匿名函数!&qu ...

  3. Codeforces Round #509 (Div. 2)

    咕咕咕了好多天终于有时间写篇博客了_(:з」∠)_ 打网赛打到自闭的一周,终于靠这场CF找回了一点信心... 1041A - Heist \(ans=max\left \{ a_i \right \} ...

  4. java文件与流课后作业

    1,编写一个程序,指定一个文件夹,能自动计算出其总容量, 2,编写一个文件加解密程序,通过命令行完成加解密工作3,编写一个文件分割工具,能把一个大文件分割成多个小的文件.并且能再次把它们合并起来得到完 ...

  5. 20175320 2018-2019-2 《Java程序设计》第7周学习总结

    20175320 2018-2019-2 <Java程序设计>第7周学习总结 教材学习内容总结 本周学习了教材的第八章的内容,在这章中介绍了常用的实用类,着重讲了如何利用String类.S ...

  6. mysql5.7.17版本升级源码方式及恢复主主复制

    版本升级--自测 从库 ------------ 停止主从复制 stop slave 全库备份 mysqldump -u root -p -S mysql.sock --all-databases&g ...

  7. Win10问题汇总

    1.重置网络连接命令 netsh winsock reset ipconfig /flushdns 2.WIN10去除我的电脑上面的6个文件夹 把下面代码复制,保存到.reg中,然后执行即可(修改注册 ...

  8. 一键启动frida server的cmd脚本

    和以前写过的在pc直接操作的手机端的sqlite的脚本类似,需要用到重定向的命令 frida-server_helper.bat su /data/local/tmp/frida-server fri ...

  9. VUE-005-axios常用请求参数设置方法

    在前后端分离的开发过程中,经常使用 axios 进行后端接口的访问. 个人习惯常用的请求参数设置方法如下所示: // POST方法:data在请求体中 addRow(data) { return th ...

  10. mysql本地安装

    1.下载地址: https://downloads.mysql.com/archives/community/ 2.安装: 解压目录:D:\mysql\mysql-5.6.36-winx64 2.1. ...