html 旋转
<!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 旋转的更多相关文章
- Canvas绘图之平移translate、旋转rotate、缩放scale
画布操作介绍 画布绘图的环境通过translate(),scale(),rotate(), setTransform()和transform()来改变,它们会对画布的变换矩阵产生影响. 函数 方法 描 ...
- Carousel 旋转画廊特效的疑难杂症
疑难杂症 该画廊特效的特点就是前后元素有层级关系. 我想很多人应该看过或者用过这个插件carousel.js,网上也有相关的教程.不知道这个插件的原型是哪个,有知道的朋友可以告诉我. 该插件相对完美, ...
- jQuery可拖拽3D万花筒旋转特效
这是一个使用了CSS3立体效果的强大特效,本特效使用jQuery跟CSS3 transform来实现在用户鼠标按下拖动时,环形图片墙可以跟随鼠标进行3D旋转动画. 效果体验:http://hovert ...
- css3制作旋转动画
现在的css3真是强大,之前很多动画都是用jq来实现,但是css3制作的动画要比jq实现起来简单很多,今天呢,我自己也写了一个css旋转动画和大家分享.效果如下面的图片 思路:1.制作之前呢,我们先来 ...
- Android 旋转屏幕--处理Activity与AsyncTask的最佳解决方案
一.概述 运行时变更就是设备在运行时发生变化(例如屏幕旋转.键盘可用性及语言).发生这些变化,Android会重启Activity,这时就需要保存activity的状态及与activity相关的任务, ...
- EasyPR--开发详解（4）形态学操作、尺寸验证、旋转等操作
在上一篇深度分析与调优讨论中,我们介绍了高斯模糊,灰度化和Sobel算子.在本文中,会分析剩余的定位步骤. 根据前文的内容,车牌定位的功能还剩下如下的步骤,见下图中未涂灰的部分. 图1 车牌定位步骤 ...
- iOS----应用的旋转---Orientations
此博文主要针对IOS应用, 是屏幕旋转相关问题的一个总结. 主要内容有: IOS5,6,7不同版的适配. 强制旋转和自动旋转. QQ : 1101819159 邮箱: GeekiVan@aliyun. ...
- 【CSS3动画】transform对文字及图片的旋转、缩放、倾斜和移动
前言:之前我有写过CSS3的transform这一这特性,对于它的用法,还不是很透彻,今天补充补充,呵呵 你懂的,小司机准备开车了. a)再提一提transform的四个属性 ①旋转--->ro ...
- 关于android中调用系统拍照，返回图片是旋转90度
转载博客:http://blog.csdn.net/walker02/article/details/8211628 项目开发中遇到的一个问题,对于三星手机在做手机照片选择时出现图片显示不正常,研究后 ...
- Android立体旋转动画实现与封装（支持以X、Y、Z三个轴为轴心旋转）
本文主要介绍Android立体旋转动画,或者3D旋转,下图是我自己实现的一个界面 立体旋转分为以下三种: 1. 以X轴为轴心旋转 2. 以Y轴为轴心旋转 3. 以Z轴为轴心旋转--这种等价于andro ...
随机推荐
- 在eclipse-oxygen-sts中，关于快捷键[CTRL + SHIFT + O]失效的问题
这是sts的一个bug,没关系,重新设置接口 按照如图位置修改即可 下图截自于stackoverflow
- DevExpress GridControl List绑定方式下新增行的方法
List<Person> gridDataList = new List<Person>(); //此处是数据源 List集合 BindingList<Person> ...
- 我的IT之路2013（一）
一眨眼又到了写总结的时候了.废话不多说了,直接切入正题. 春节过后 从春节前开始大概半个月的时间就开始在TKY做物资管理项目,中间穿插了两个考试和J2EE的学习:结束TKY工作后继续深入学习J2EE, ...
- Shell（6）： 多线程操作及线程数
任务需要:当我需要对一个文件夹中的文件,分别压缩的时候: 原始的代码: #!/usr/bin/shell function getdir(){ for element in `ls $1` do #e ...
- centos 7 min 编译安装php5.6+nginx1.7.5 笔记
1.安装mysql请参照 centos 7 min 编译安装mysql5.6.20 笔记 2.编译安装php5.6+nginx1.7.5 2.1.安装php5.6.0 首先添加依赖应用yum inst ...
- SpringMVC中的 JSR 303 数据校验框架说明
JSR 303 是java为Bean数据合法性校验提供的标准框架,它已经包含在JavaEE 6.0中. JSR 303 通过在Bean属性上标注类似于@NotNull.@Max等标准的注解指定校验规则 ...
- apache ab压力测试报错apr_socket_recv
apache ab压力测试报错(apr_socket_recv: Connection reset by peer (104)) apache 自带的ab工具测试,当并发量达到1000多的时候报错如下 ...
- Java 11 将至，不妨了解一下 Oracle JDK 之外的版本
Java 11 计划于本月,即 9 月 25 日发布.与 Java 10 不同,Java 11 不仅提供了长期支持,还将作为 Java 平台的参考实现.新的长期支持版本每三年发布一次,根据后续的发布计 ...
- jQuery实现radio第一次点击选中第二次点击取消功能(转)
转载自:http://www.jb51.net/article/113730.htm 由于项目的需求,要求radio点击两次后为取消状态,不方便修改为checkbox,可以用正面的方法实现. // j ...
- Android Studio SVN使用
昨天弄了一天的Android Studio svn,感觉没有eclipse的svn好装,中间遇到很多的麻烦问题.这里来记录下吧 上传比较简单,就直接贴我看我别的的上传教程. https://blog. ...