纯CSS炫酷的3D旋转
<html>
<head>
<meta charset="utf-8">
<title>纯CSS炫酷的3D旋转</title>
<style type="text/css">
.perspective{
perspective:400px;
/*perspective 属性定义 3D 元素距视图的距离,以像素计。该属性允许您改变 3D 元素查看 3D 元素的视图。
当为元素定义 perspective 属性时,其子元素会获得透视效果,而不是元素本身。
注释:perspective 属性只影响 3D 转换元素。*/
position:relative; /*relative 相对定位*/
top:300px; /*离顶部的距离*/
left:400px; /*离左边的距离*/
width:300px; /*设置宽300px*/
height:300px; /*设置高300px*/
}
/*去掉自定义列表的默认样式*/
ul{ margin:0; padding:0; list-style:none;}
/*让所有li重叠*/
.cube li{
width:305px;
height:305px;
position:absolute;
top:0; left:0;
}
/*设置li中div的样式,div也可以换成图片*/
.cube div{
border:2px black solid;/*边框红色实线*/
height:300px;
width:300px;
}
div{width:100%;height:100%}
.cube{
width:300px;
transform:rotateY(45deg); /*沿Y轴旋转*/
transform-style:preserve-3d; /*transform-style 属性规定如何在 3D 空间中呈现被嵌套的元素。*/
animation:rotate 5s infinite linear;
}
/*创建自定义动画*/
@keyframes rotate{
0%{ transform:rotateZ(0deg) rotateX(360deg) rotateY(360deg); }
100%{transform:rotateZ(0deg) rotateX(0deg) rotateY(0deg);}
}
.front{
transform:rotateY(0deg) translateZ(150px);
background:blue;
}
.back{
transform:rotateY(180deg) translateZ(150px);
background:green;
}
.left{
transform:rotateY(90deg) translateZ(150px);
background:yellow;
}
.right{
transform:rotateY(-90deg) translateZ(150px);
background:white;
}
.top{
transform:rotateX(90deg) translateZ(150px);
background:red;
}
.bottom{
transform:rotateX(-90deg) translateZ(150px);
background:orange;
}
</style>
</head>
<body>
<div class="perspective">
<ul class="cube">
<li class="front"><div></div></li>
<li class="back"><div></div></li>
<li class="left"><div></div></li>
<li class="right"><div></div></li>
<li class="top"><div></div></li>
<li class="bottom"><div></div></li>
</ul>
</div>
</body>
</html>
纯CSS炫酷的3D旋转的更多相关文章
- 纯CSS炫酷3D旋转立方体进度条特效
在网站制作中,提高用户体验度是一项非常重要的任务.一个创意设计不但能吸引用户的眼球,还能大大的提高用户的体验.在这篇文章中,我们将大胆的将前面所学的3D立方体和进度条结合起来,制作一款纯CSS3的3D ...
- 基于jQuery和CSS3炫酷图片3D旋转幻灯片特效
在线预览 源码下载 iPresenter是一款效果非常炫酷的jQuery和CSS3 3D旋转幻灯片特效插件.你可以使用它来制作产品展示.图片画廊或者各种幻灯片和轮播图特效.这款幻灯片插件的特点有: ...
- 初级开发者也能码出专业炫酷的3D地图吗?
好看的3D地图搭建出来,一定是要能为开发者所用与业务系统开发中才能真正地体现价值.基因于此,CityBuilder建立了与ThingJS的通道——直转ThingJS代码,支持将配置完成的3D地图一键转 ...
- canvas - 炫酷的3D星空
1.国际惯例,先上效果 (⊙o⊙)… 效果图看上去效果并不很炫酷啊,直接戳 这里 看效果吧! 2代码部分 html: <canvas id="canvas" width=&q ...
- WebGIS简单实现一个区域炫酷的3D立体地图效果
1.别人的效果 作为一个GIS专业的,做一个高大上的GIS系统一直是我的梦想,虽然至今为止还没有做出一个理想中的系统,但是偶尔看看别人做的,学习下别人的技术还是很有必要的.眼睛是最容易误导我们的,有时 ...
- 17.1拓展之纯 CSS 创作炫酷的同心圆旋转动画
效果地址:https://codepen.io/flyingliao/pen/ebjEMm?editors=1100 HTML代码: <div class="loader"& ...
- 【pano2vr】网页Flash中简单实现炫酷的3D模型制作
花了两天时间学习如何能够高效的实现3D模型效果,毕竟是从0开始学习,感觉pano2vr这款软件挺容易上手,并且可以很容易实现简单的热点交互,可以根据交互需求设置皮肤,故将这一款软件推荐给大家: 1.简 ...
- 10.纯 CSS 创作一个同心圆弧旋转 loader 特效
原文地址:https://segmentfault.com/a/1190000014682999 想到了扇形:正方形 ->border-radius: 50%; ->取四份中的任意一份. ...
- 24、Cocos2dx 3.0游戏开发找小三之网格动作:高炫酷的3D动作
重开发人员的劳动成果,转载的时候请务必注明出处:http://blog.csdn.net/haomengzhu/article/details/37596763 网格动作类似于动作特效,能够实现翻转. ...
随机推荐
- Mybatis插件原理分析(一)
我们首先介绍一下Mybatis插件相关的几个类,并对源码进行了简单的分析. Mybatis插件相关的接口或类有:Intercept.InterceptChain.Plugin和Invocation,这 ...
- Unable to handle 'index' format version '2', please update rosdistro的解决办法
之前安装的ROS是Fuerte版本的,好久没有更新,不知不觉又出来了好几个新的版本,今天删除了Fuerte,计划安装Hydro版本的尝尝新,按照官网的安装流程,很快就可以把新版本安装上去了,但是在&q ...
- GDAL书籍
GDAL的书籍经过快两年的编写修改,终于出版发行了,有需要的同学可以到下面的网址进行购买. 购买地址: 亚马逊:http://www.amazon.cn/GDAL%E6%BA%90%E7%A0%81% ...
- (NO.00001)iOS游戏SpeedBoy Lite成形记(二十五)
每次压赌要打开弹出菜单还是让人略觉不爽,下面我们再添加一个随机押注的按钮:自动随机选择选手和下赌金额. 打开spriteBuilder,修改GameInterface.ccb的界面,在Run按钮旁边添 ...
- (NO.00001)iOS游戏SpeedBoy Lite成形记(十二)
如果选手能在加速的时候屁股产生推进器效果就跟好了,仿佛选手腾云驾雾的感觉.我们可以用Cocos2D中的CCMotionStreak类来轻松实现.下面在Player.h接口文件添加以下代码: @prop ...
- unity描边效果
这里总结了几种在unity实现描边效果的方法,首先准备一个模型导入在unity中,使用默认shader,上传一张原始图,以便后面实现功能效果的对比 一.边缘光,这里参照官方的一个SurfaceShad ...
- 数据结构基础(3) --Permutation & 插入排序
Permutation(排列组合) 排列问题: 设R = {r1, r2, ... , rn}是要进行排列的n个元素, Ri = R-{ri}; 集合X中元素的全排列记为Permutation(X), ...
- jsp中的tag与tld
转载自: http://www.cnblogs.com/fanzi2009/archive/2010/04/08/1707888.html 在jsp文件中,可以引用tag和tld文件. 1.对于ta ...
- Android Hal 分析
本文是基于android4.0.3.对应其他低版本的代码,可能有所差异,但基本大同小异. Android的HAL是为了保护一些硬件提供商的知识产权而提出的,是为了避开linux的GPL束缚.思路是把控 ...
- C++ 传参时传内置类型时用传值(pass by value)方式效率较高
来源:唐磊的个人博客<C++ 传参时传内置类型时用传值(pass by value)方式效率较高> 在<Effective C++>里提到对内置(C-like)类型在函数传参时 ...