<!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. 查找已连接过的wifi密码

    无意之间看到能破解已连接过的wifi密码的诀窍,赶紧存储下来. 1. 首先打开终端 2. 在没有网路的情况下输入: netsh wlan show profiles 结果如下(自己的): 这些‘用户配 ...

  2. mobile_音悦台

    音悦台 less 可以 width = 1080/67.5rem; /**** 变量定义 ****/ @px: 67.5rem; /**** Start ****/ #wrap { width: 10 ...

  3. [LeetCode] Largest Sum of Averages 最大的平均数之和

    We partition a row of numbers A into at most K adjacent (non-empty) groups, then our score is the su ...

  4. python selenium ——— 动态id、class定位

    什么样的是动态id呢? 动态id就是第一次点击显示的id与二次点击显示的不一样,一般是元素属性中包含一段数字的这种情况. 类似这种: 1 <input type="button&quo ...

  5. js 模拟超级大LE透中头奖 统计中头奖需要购买的彩票次数以及购买总金额

    <!DOCTYPE html> <html> <head> <title>超级大LE透模拟</title> </head> &l ...

  6. LeetCode 13 Roman to Integer 解题报告

    题目要求 Roman numerals are represented by seven different symbols: I, V, X, L, C, Dand M. Symbol Value ...

  7. 微信小程序wx.getLocation()获取经纬度及JavaScript SDK调用腾讯地图API获取某一类地址

    简介 腾讯位置服务为微信小程序提供了基础的标点能力.线和圆的绘制接口等地图组件和位置展示.地图选点等地图API位置服务能力支持,使得开发者可以自由地实现自己的微信小程序产品. 在此基础上,腾讯位置服务 ...

  8. @ResponseBody ResponseEntity

    1.产生疑问 我们知道,如果在 Controller 的某个方法上加上 @ResponseBody 注解,那么你就能拿到 json 数据. 如果你只是知道这么用,那么你应该知道 ResponseBod ...

  9. MongoDB操作集

    官网 https://www.mongodb.com/download-center#community 基本资料: http://www.runoob.com/mongodb/mongodb-int ...

  10. tomcat部署公共jar包

    如果每次打war包都要把所有依赖jar放在WEB-INF/lib下,是很傻的做法,war包很大,也浪费内存.参考之前jboss上部署公共jar的经验,tomcat实现起来想来也不困难. 1. 参照ma ...