<!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. DWM1000 多个基站定位讨论 --[蓝点无限]

    该篇是之前<DWM1000 多个标签定位讨论 --[蓝点无限]>的续篇 多基站定位也是定位必然,因为有些稍微大一点的场合,或者多个区域(厂区不同房间)定位,往往4个基站会严重不足. DWM ...

  2. JavaScript（四）

    条件语句 通过条件来控制程序的走向,就需要用到条件语句. 运算符 1.算术运算符: +(加). -(减). *(乘). /(除). %(求余)2.赋值运算符:=. +=. -=. *=. /=. %= ...

  3. 02_ if_else if 练习

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  4. FastDFS 分布式文件系统的安装与使用（单节点）

    FastDFS 分布式文件系统的安装与使用(单节点) 跟踪服务器:192.168.4.121 (edu-dfs-tracker-01) 存储服务器:192.168.4.125 (edu-dfs-sto ...

  5. 如何安装Magento 2.0

    //来源:http://www.360magento.com/blog/install-magento2 如何安装Magento 2.0 2015/8/11 下午4:23 发布者: shi yong ...

  6. OUTLOOK2019 解决 无法验证您连接到的服务器使用的安全证书

    在配置好Outlook后,每次打开Outlook,都会弹框提醒“无法验证您连接到的服务器使用的安全证书”,网上搜的很多办法都无法解决,最后在微软的官方解答中找到了解决方案,分享给大家!   打开Out ...

  7. python特定时间发送消息到微信公众号

    #!/usr/bin/env python# -*- coding: utf-8 -*-# __author__ = 'James'# 导入模块from wxpy import *import tim ...

  8. token登录流程

    1.token生成规则: private static $nameKey = array( 'readerid' => 0, //客户号 'ubuntu' => 1, //登录令牌 'pt ...

  9. css table之合并单元格

    colspan 是合并列,rowspan是合并行,合并行的时候,比如rowspan="2",它的下一行tr会少一列:合并列的时候 colspan="2",此行的 ...

  10. com.alibaba.druid.pool.DruidDataSource : {dataSource-2} init error

    这几天准备写一个项目,其中的整合druid的时候,发现出现了下面这个错误.找了好久都没有找到.网上的各种解决方法都不对. 2018-11-07 16:26:28.940 INFO 19684 --- ...