<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旋转的更多相关文章

  1. 纯CSS炫酷3D旋转立方体进度条特效

    在网站制作中,提高用户体验度是一项非常重要的任务.一个创意设计不但能吸引用户的眼球,还能大大的提高用户的体验.在这篇文章中,我们将大胆的将前面所学的3D立方体和进度条结合起来,制作一款纯CSS3的3D ...

  2. 基于jQuery和CSS3炫酷图片3D旋转幻灯片特效

    在线预览   源码下载 iPresenter是一款效果非常炫酷的jQuery和CSS3 3D旋转幻灯片特效插件.你可以使用它来制作产品展示.图片画廊或者各种幻灯片和轮播图特效.这款幻灯片插件的特点有: ...

  3. 初级开发者也能码出专业炫酷的3D地图吗？

    好看的3D地图搭建出来,一定是要能为开发者所用与业务系统开发中才能真正地体现价值.基因于此,CityBuilder建立了与ThingJS的通道——直转ThingJS代码,支持将配置完成的3D地图一键转 ...

  4. canvas - 炫酷的3D星空

    1.国际惯例,先上效果 (⊙o⊙)… 效果图看上去效果并不很炫酷啊,直接戳 这里 看效果吧! 2代码部分 html: <canvas id="canvas" width=&q ...

  5. WebGIS简单实现一个区域炫酷的3D立体地图效果

    1.别人的效果 作为一个GIS专业的,做一个高大上的GIS系统一直是我的梦想,虽然至今为止还没有做出一个理想中的系统,但是偶尔看看别人做的,学习下别人的技术还是很有必要的.眼睛是最容易误导我们的,有时 ...

  6. 17.1拓展之纯 CSS 创作炫酷的同心圆旋转动画

    效果地址:https://codepen.io/flyingliao/pen/ebjEMm?editors=1100 HTML代码: <div class="loader"& ...

  7. 【pano2vr】网页Flash中简单实现炫酷的3D模型制作

    花了两天时间学习如何能够高效的实现3D模型效果,毕竟是从0开始学习,感觉pano2vr这款软件挺容易上手,并且可以很容易实现简单的热点交互,可以根据交互需求设置皮肤,故将这一款软件推荐给大家: 1.简 ...

  8. 10.纯 CSS 创作一个同心圆弧旋转 loader 特效

    原文地址:https://segmentfault.com/a/1190000014682999 想到了扇形:正方形 ->border-radius: 50%; ->取四份中的任意一份. ...

  9. 24、Cocos2dx 3.0游戏开发找小三之网格动作：高炫酷的3D动作

    重开发人员的劳动成果,转载的时候请务必注明出处:http://blog.csdn.net/haomengzhu/article/details/37596763 网格动作类似于动作特效,能够实现翻转. ...

随机推荐

  1. 【一天一道LeetCode】#65. Valid Number

    一天一道LeetCode 本系列文章已全部上传至我的github,地址:ZeeCoder's Github 欢迎大家关注我的新浪微博,我的新浪微博 欢迎转载,转载请注明出处 (一)题目 Validat ...

  2. 使用Libgdx开发的FlappyBird（像素鸟、疯狂的小鸟）游戏源码

    本帖最后由 宋志辉 于 2014-10-21 15:06 编辑 点击进入下载地址 Flappy Bird(飞扬的小鸟)由一位来自越南河内的独立游戏开发者阮哈东开发,是一款形式简易但难度极高的休闲游戏. ...

  3. 【嵌入式开发】C语言 命令行参数 函数指针 gdb调试

    . 作者 : 万境绝尘 转载请注明出处 : http://blog.csdn.net/shulianghan/article/details/21551397 | http://www.hanshul ...

  4. Leetcode_121_Best Time to Buy and Sell Stock

    本文是在学习中的总结,欢迎转载但请注明出处:http://blog.csdn.net/pistolove/article/details/43024967 Say you have an array ...

  5. 为神马精确Sprite的碰撞形状不通过简单的放大Sprite的尺寸来解决?

    原因是SoftBodyDrawNode的绘制代码中已经没有完整的,一体化的(incorporate)缩放,旋转或者甚至是精灵的位置(scale,rotation,or even the sprite' ...

  6. 算法精解:最小二乘法C实现

    计量经济学研究的直接目的是确定总体回归函数Yi=B1+B2Xi+ui,然而能够得到的只是来自总体的若干样本的观测值,要用样本信息建立的样本回归函数尽可能"接近"地去估计总体回归函数 ...

  7. ”()“和”[]“引发的血案——由此引出C++中关键词new

    先来看一个程序吧: #include <iostream> #include <cassert> using namespace std; int main() { ; int ...

  8. Android BLE与终端通信（四）——实现服务器与客户端即时通讯功能

    Android BLE与终端通信(四)--实现服务器与客户端即时通讯功能 前面几篇一直在讲一些基础,其实说实话,蓝牙主要为多的还是一些概念性的东西,当你把概念都熟悉了之后,你会很简单的就可以实现一些逻 ...

  9. Mybatis的resultType

    使用mybatis去查询数据时,没有指定resultType,mybatis无法返回正常结果,当然在web中并没有出现报错,所以有点坑自己了,所以需要使用如下配置: <select id=&qu ...

  10. Linux文件与目录的默认权限与隐藏权限 - umask, chattr, lsattr, SUID, SGID, SBIT, file

    文件默认权限:umask [root@www ~]# umask 0022 <==与一般权限有关的是后面三个数字! [root@www ~]# umask -S u=rwx,g=rx,o=rx ...