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. 使用netstat命令查看端口的使用情况
			
    Windows如何查看端口占用情况操作步骤如下: 开始--运行--cmd 进入命令提示符,输入netstat -ano 即可看到所有连接的PID 之后在任务管理器中找到这个PID所对应的程序如果任务管 ...
    
			
    2. 
						
  2. 使用js做LeetCode
			
    概述 无意中得知了LeetCode这个刷题网站, 深得我意. 其实作为一个程序员, 我是很看重写基础代码的, 因为这个写熟了, 以后学各种语言就不会太困难. 所以我觉得有必要把这件事记下来, 供以后开 ...
    
			
    3. 
						
  3. Postgresql日志收集
			
    PG安装完成后默认不会记录日志,必须修改对应的(${PGDATA}/postgresql.conf)配置才可以,这里只介绍常用的日志配置. 1.logging_collector = on/off   ...
    
			
    4. 
						
  4. Linux 进程一直占用单核CPU分析
			
    pidstat 1信息
    
			
    5. 
						
  5. Linux - 查看命令所属的软件包
			
    这里以查看netstat命令所属的软件包为例. CentOS:利用yum provides命令 netstat命令所属的软件包为net-tools [root@CentOS7 ~]# yum prov ...
    
			
    6. 
						
  6. docker 容器时间和系统时间不一致
			
    docker cp /etc/localtime 容器名:/etc/localtime cp /etc/localtime 24fe94504424:/etc/localtime date -s 09 ...
    
			
    7. 
						
  7. 获取CPU ID--查看CPU数量/核数
			
    Ubuntu 获取CPU序列号或者主板序列号 CPU ID 代码: sudo dmidecode -t 4 | grep ID ID: 54 06 05 00 FF FB 8B 0F 主板序列号 代码 ...
    
			
    8. 
						
  8. Postgresql操作json格式数据
			
    1.select array_to_json('{{1,5},{99,100}}'::int[])
    
			
    9. 
						
  9. 从零开始学 Web 之 Ajax（二）PHP基础语法
			
    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...
    
			
    10. 
						
  10. AcceptEx与完成端口（IOCP）结合实例
			
    前言 在windows平台下实现高性能网络服务器,iocp(完成端口)是唯一选择.编写网络服务器面临的问题有:1 快速接收客户端的连接.2 快速收发数据.3 快速处理数据.本文主要解决第一个问题. A ...
    
			
    11.