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. Nginx---(Server虚拟主机)
			
    server{ listen PORT; server_name NAME; root /PATH: } 基于端口 listen指令监听在不同的端口; 基于IP 基于FQDN (域名,主机名) ser ...
    
			
    2. 
						
  2. ajax无刷新技术
			
    第一步:创建ajax引擎 var xmlhttp=""; if(window.XMLHttpRequest){ xmlhttp=new XMLHttpRequest(); }els ...
    
			
    3. 
						
  3. [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 ...
    
			
    4. 
						
  4. mybatis随笔五之Executor
			
    在上一篇文章我们分析到了mapper接口方法的实现实际上是交由代理类来实现的,并最终调用Executor来查询,接下来我们对executor.query(ms, wrapCollection(para ...
    
			
    5. 
						
  5. 字符串replaceAll()方法报错：java.util.regex.PatternSyntaxException:Unclosed group near index...
			
    Unclosed group near index错误 之前自己写的一个模块在项目上线后最近频频出现tomcat崩掉的情况,从log看出现如下的报错信息: java.util.regex.Patter ...
    
			
    6. 
						
  6. 【PyTorch深度学习60分钟快速入门 】Part2：Autograd自动化微分
			
      在PyTorch中,集中于所有神经网络的是autograd包.首先,我们简要地看一下此工具包,然后我们将训练第一个神经网络. autograd包为张量的所有操作提供了自动微分.它是一个运行式定义的 ...
    
			
    7. 
						
  7. 【awesome-dotnet-core-learning】(2)-Sprache.Calc-表达式计算器
			
    [awesome-dotnet-core-learning](2)-Sprache.Calc-表达式计算器 示例代码托管在GITHUB上, 欢迎STAR! 严格来说, Sprache.Calc只是上一 ...
    
			
    8. 
						
  8. MVC四大筛选器—ActionFilter&ResultedFilter
			
    AuthorizeFilter筛选器 在Action的执行中包括两个重要的部分,一个是Action方法本身逻辑代码的执行,第二个就是Action方法的筛选器的执行. MVC4中筛选器都是以AOP(面向 ...
    
			
    9. 
						
  9. SqlServer 登录和卸载
			
    一.数据库简介 SQLServer环境配置 安装好数据库以后怎么启用sa账号来访问数据库. 1.先用windows账号登录数据库. 2.启用windows身份验证方式和sql server身份验证方式 ...
    
			
    10. 
						
  10. Aspose.Cells API 中文版文档 下载
			
    链接: https://pan.baidu.com/s/19foJyWgPYvA7eIqEHJ_IdA 密码: yxun
    
			
    11.