<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        ul{

            position: relative;/*相对定位*/

            width: 200px;

            height: 200px;

            transform-style: preserve-3d;/*将所有子元素呈现在3d空间中*/

            margin: 250px auto;

            animation: run 5s infinite linear;

        }

        li{

            list-style: none;

            width:200px;

            height: 200px;

            position: absolute;

            left: 0;

            top: 0;

            opacity: 0.4;

        }

        li:first-child{

            background: red;

            transform: translateZ(100px)/*用translateZ将面都沿着Z轴平移了100像素*/

        }

        li:nth-child(2){

            background: green;

            transform: translateY(-100px) rotateX(90deg);

        }

        li:nth-child(3){

            background: pink;

            transform: translateY(100px) rotateX(90deg);

        }

        li:nth-child(4){

            background: orange;

            transform: translateX(-100px) rotateY(90deg);

        }

        li:nth-child(5){

            background: blue;

            transform: translateX(100px) rotateY(90deg);

        }

        li:nth-child(6){

            background: blue;

            transform: translateZ(-100px);

        }

    </style>

</head>

<body>

    <ul>

        <li>1</li>

        <li>2</li>

        <li>3</li>

        <li>4</li>

        <li>5</li>

        <li>6</li>

    </ul>

</body>

</html>

html 旋转的更多相关文章

  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 项目开发中遇到的一个问题,对于三星手机在做手机照片选择时出现图片显示不正常,研究后 ...

  10. Android立体旋转动画实现与封装（支持以X、Y、Z三个轴为轴心旋转）

    本文主要介绍Android立体旋转动画,或者3D旋转,下图是我自己实现的一个界面 立体旋转分为以下三种: 1. 以X轴为轴心旋转 2. 以Y轴为轴心旋转 3. 以Z轴为轴心旋转--这种等价于andro ...

随机推荐

  1. 菜鸟学SSH（一）——Struts实现简单登录（附源码）

    从今天开始,一起跟各位聊聊java的三大框架——SSH.先从Struts开始说起,Struts对MVC进行了很好的封装,使用Struts的目的是为了帮助我们减少在运用MVC设计模型来开发Web应用的时 ...

  2. Swift中Notification.Name这么难用怎么办

    Swift中Notification.Name这么难用怎么办 以前的发送通知的参数就是一个简单的字符串: NSNotificationCenter.defaultCenter().post(" ...

  3. Asp.Net MVC分页PageList

    1.mvc网站右键->管理nuget程序包->安装下边两个组件 2.controller public dbModel db = new dbModel(); public ActionR ...

  4. 玩转Bootstrap（JS插件篇）-第1章 模态弹出框 :1-3 模态弹出框

    模态弹出框(Modals) 这一小节我们先来讲解一个“模态弹出框”,插件的源文件:modal.js. 右侧代码编辑器(30行)就是单独引入 bootstrap 中发布出的“modal.js”文件. 样 ...

  5. vue2 自定义时间过滤器

    // template {{a | data}} //script data:{   a: Date.now() } filters: {   data:function (input) {

  6. “一键制作启动u盘失败”的主要原因是什么？

    一键制作启动u盘失败的主要原因是什么?今天u启动小编就和大家一起来分析原因并寻求答案吧!     原因分析:   1.u盘内有文件正在运行或者是打开:   2.u盘自身的质量问题:   3.最主要的原 ...

  7. Gridview排序与分页-不使用“DataSourceControl DataSource”的情况下如何分页和排序 ...

    如果你在GridView控件上设置 AllowPaging="true" or AllowSorting="true" 而没有使用使用数据源控件 DataSou ...

  8. Phrase-Based & Neural Unsupervised Machine Translation基于短语非监督机器翻译

    1. 前言 本文介绍一种无监督的机器翻译的模型.无监督机器翻译最早是<UNSUPERVISED NEURAL MACHINE TRANSLATION>提出.这个模型主要的特点,无需使用平行 ...

  9. 结合order by 解CTF某题

    真tmd不容易 <?php error_reporting(0); if (!isset($_POST['uname']) || !isset($_POST['pwd'])) { echo '& ...

  10. [转]Oracle 语法之 OVER (PARTITION BY ..) 及开窗函数

    oracle的分析函数over 及开窗函数 一:分析函数Oracle从8.1.6开始提供分析函数,分析函数用于计算基于组的某种聚合值,它和聚合函数的不同之处是 对于每个组返回多行,而聚合函数对于每个组 ...