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. RunC容器逃逸漏洞席卷业界，网易云如何做到实力修复？
			
    近日,业界爆出的runC容器越权逃逸漏洞CVE-2019-5736,席卷了整个基于runC的容器云领域,大量云计算厂商和采用容器云的企业受到影响.网易云方面透露,经过技术团队的紧急应对,网易云上的容器 ...
    
			
    2. 
						
  2. javaweb中的乱码问题
			
    0.为什么需要编码,解码, 无论是图片,文档,声音,在网络IO,磁盘io中都是以字节流的方式存在及传递的,但是我们拿到字节流怎么解析呢?这句话就涉及了编码,解码两个过程,从字符数据转化为字节数据就是编 ...
    
			
    3. 
						
  3. 你可能不知道的viewport
			
    概述 前几天偶然看到一个pc端网页,发现用手机打开竟然同比缩放了,作为一个前端从业者,我自然想要弄清它到底是怎么缩放的.之后查了它的meta信息,css和js,发现没有任何兼容手机端的代码,那它到底是 ...
    
			
    4. 
						
  4. Servlet案例1：用户登录
			
    数据库准备: CREATE DATABASE web; USE web; CREATE TABLE users( id INT PRIMARY KEY AUTO_INCREMENT, username ...
    
			
    5. 
						
  5. Linux学习笔记《六》
			
    
			
    6. 
						
  6. 机器学习技法笔记：08 Adaptive Boosting
			
    Roadmap Motivation of Boosting Diversity by Re-weighting Adaptive Boosting Algorithm Adaptive Boosti ...
    
			
    7. 
						
  7. 爬虫--反爬--css反爬---大众点评爬虫
			
    大众点评爬虫分析,,大众点评 的爬虫价格利用css的矢量图偏移,进行加密 只要拦截了css 解析以后再写即可 # -*- coding: utf- -*- """ Cre ...
    
			
    8. 
						
  8. .NET手记-ASP.NET MVC快速分页的实现
			
    对于Web应用,展示List是很常见的需求,随之而来的常见的分页组件.jQuery有现成的分页组件,网上也有着大量的第三方分页组件,都能够快速实现分页功能.但是今天我描述的是用基本的C#和html代码 ...
    
			
    9. 
						
  9. 如何开始DDD(续)
			
    上一篇针对用户注册案例简单介绍了如何使用 DDD,接下来我将继续针对这个例子做一下补充.先将User模型丰富起来,因为目前看上去他和贫血模型还没有啥大的区别. 首先还是由领域专家来说明业务,他提出了用 ...
    
			
    10. 
						
  10. mysql遇见contains nonaggregated column 'information_schema.PROFILING.SEQ'异常
			
    报错如下:[Err] 1055 - Expression #1 of ORDER BY clause is not in GROUP BY clause and contains nonaggrega ...
    
			
    11.