3D视图正方体：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>CSS3景深-perspective</title>

 </head>

 <style>

     #div1{

         position: relative;

         width: 500px;

         height: 500px;

         perspective: 1000px; /* 景深 面的 (宽+高)*2 */

         background-color: #123456;

     }

     #div1 ul{

         transform-origin: 50% 50%; /* 旋转中心 */

         position: absolute;

         left: 50%;

         top: 50%;

         width: 250px;

         height: 250px;

         transform-style: preserve-3d; /* 设置3D属性让子元素三维空间呈现 */

         list-style: none;

         margin: -125px 0 0 -125px;

         padding: 0;

         font-size: 120px;

         animation: move 6s linear infinite; /* 动画效果 */

         /*border: 10px solid #000;*/

         /*box-sizing: border-box;*/

     }

     #div1 ul li{

         width: 100%;

         height: 100%;

         position: absolute;

         opacity: 0.8;

         box-sizing: border-box;

         border: 10px solid orange;

     }

     #div1 ul li i{

         position: absolute;

         font-style: normal;

         top: 50%;

         left: 50%;

         transform:translate(-50%,-50%);

         background-color: #fff;

     }

     #div1 ul li:nth-child(1){

         background-color: red;

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

     }

     #div1 ul li:nth-child(2){

         background-color: green;

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

     }

     #div1 ul li:nth-child(3){

         background-color: yellow;

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

     }

     #div1 ul li:nth-child(4){

         background-color: black;

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

     }

     #div1 ul li:nth-child(5){

         background-color: pink;

         transform: translateZ(-125px);

     }

     #div1 ul li:nth-child(6){

         background-color: blue;

         transform: translateZ(125px);

     }

     @keyframes move{

         0% {

             transform: rotateX(0deg);

         }

         25% {

             transform: rotateX(180deg);

         }

         50% {

             transform: rotateX(360deg) rotateY(0deg);

         }

         75% {

             transform: rotateX(360deg) rotateY(180deg);

         }

         100% {

             transform: rotateX(360deg) rotateY(360deg);

         }

     }

     /*==================================================================*/

 </style>

 <body>

     <div id="div1">

         <ul>

             <li> <i>												


											
CSS3景深-perspective的更多相关文章
	

    
								
  1. css3 tranform perspective属性
		
    perspective 属性用于规定观察点距离元素的距离, 1 观察点距离元素越近,元素变形就越大,灭点距离越近. 2 观察点距离元素越远,元素变形越小,灭点距离也就越远. 比如设置perspecti ...
    
		
    2. 
						
  2. css3中perspective
		
    perspective 属性定义 3D 元素距视图的距离,以像素计.该属性允许改变 3D 元素查看 3D 元素的视图.当为元素定义 perspective 属性时,其子元素会获得透视效果,而不是元素本 ...
    
		
    3. 
						
  3. 如何理解 css3 的 perspective 属性
		
    一.写在前面的话 最近想多了解一下CSS3的transform 3D效果,transform:英文直译就是转换,它可以实现旋转.缩放.位移等效果,听起来有没有觉得很酷的样子,狠狠的点这里来看看旋转和位 ...
    
		
    4. 
						
  4. css3 利用perspective实现翻页效果和正方体 以及翻转效果
		
    要点: 1 实现3D效果就需要使用perspective属性 1 页面旋转使用css3的rorate 2 使用backface-visibility 实现正面元素翻转之后背面不可见,显示出反面的元素  ...
    
		
    5. 
						
  5. transform 的旋转 ，3d效果，要添加3d效果的父级加上景深perspective。 3d效果的容器加上 transform-style：preserve-3d。
		
    该技术用于创建一个多维的数据,在这个实例中使用了两个元素用于正面和反面.前面用来放置产品图片,底部用来放置产品信息.默认情况下产品信息隐藏起来,同时鼠标悬停在产品图片上时,隐藏在底部的产品信息在X轴放 ...
    
		
    6. 
						
  6. css3 视距-perspective
		
           视距-用来设置用户与元素3d空间Z平面之间的距离. 实例1:       HTML: <div class="perspective"> <h3&g ...
    
		
    7. 
						
  7. CSS3： perspective 3D属性
		
    本文引自:http://blog.csdn.net/cddcj/article/details/52956540 perspective 属性指定了观察者与z=0平面的距离,使具有三维位置变换的元素产 ...
    
		
    8. 
						
  8. css3实践之摩天轮式图片轮播+3D正方体+3D标签云（perspective、transform-style、perspective-origin）
		
    本文主要通过摩天轮式图片轮播的例子来讲解与css3 3D有关的一些属性. demo预览: 摩天轮式图片轮播(貌似没兼容360 最好用chrome) 3D正方体(chrome only) 3D标签云(c ...
    
		
    9. 
						
  9. css3 弹性效果上下翻转demo
		
    最近扒了一个有弹性效果上下翻转demo 上图: 上代码: <!DOCTYPE html> <html lang="en"> <head> < ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. 技术文档生成工具：appledoc
			
    做项目一般都会要求写技术文档,特别是提供SDK或者基础组件的.如果手写这类技术文档的话,工作量比编写代码也少不了多少.比如 Java 语言本身就自带 javadoc 命令,可以从源码中抽取文档.本篇我 ...
    
			
    2. 
						
  2. 用Python进行有进度条的π计算
			
    1.tqdm是一个强大的终端进度条工具,我利用pip获取tqdm函数库. 2编写代码 2.1进行π的计算 from random import random from math import sqrt ...
    
			
    3. 
						
  3. Testing - 软件测试知识汇总
			
    软件测试知识梳理 基础概念 : http://www.cnblogs.com/anliven/p/6070000.html 测试分类 : http://www.cnblogs.com/anliven/ ...
    
			
    4. 
						
  4. HTTPS 怎样保证数据传输的安全性
			
    大家都知道,在客户端与服务器数据传输的过程中,HTTP协议的传输是不安全的,也就是一般情况下HTTP是明文传输的.但HTTPS协议的数据传输是安全的,也就是说HTTPS数据的传输是经过加密的. 在客户 ...
    
			
    5. 
						
  5. [EXP]Joomla! Component Easy Shop 1.2.3 - Local File Inclusion
			
    # Exploit Title: Joomla! Component Easy Shop - Local File Inclusion # Dork: N/A # Date: -- # Exploit ...
    
			
    6. 
						
  6. Java排序方法sort的使用详解（转）
			
    一.对数组的排序: //对数组排序 public void arraySort(){ int[] arr = {1,4,6,333,8,2}; Arrays.sort(arr);//使用java.ut ...
    
			
    7. 
						
  7. 移动端真机调试终极利器-BrowserSync（使用方法）
			
    1. 安装 Node.js BrowserSync是基于Node.js的, 是一个Node模块, 如果您想要快速使用它,也许您需要先安装一下Node.js 安装适用于Mac OS,Windows和Li ...
    
			
    8. 
						
  8. 全网最详细的MyEclipse里如何正确新建普通的Java web项目并发布到Tomcat上运行成功【博主强烈推荐】（图文详解）
			
    不多说,直接上干货! 首先,大家要明确,IDEA.Eclipse和MyEclipse等编辑器之间的新建和运行手法是不一样的. 如果是在eclipse里,则是File -> new ->   ...
    
			
    9. 
						
  9. Shell脚本 | 健壮性测试之空指针检查
			
    通过 "adb shell am start" 遍历安卓应用所有的 Activity,可以检查是否存在空指针的情况. 以下为梳理后的测试流程: 通过 apktool 反编译 apk ...
    
			
    10. 
						
  10. MVCC浅析
			
    在并发读写数据库时,读操作可能会不一致的数据(脏读).为了避免这种情况,需要实现数据库的并发访问控制,最简单的方式就是加锁访问.由于,加锁会将读写操作串行化,所以不会出现不一致的状态.但是,读操作会被 ...
    
			
    11.