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. WPF简单的分页控件实现
			
    XAML代码(使用ItemsControl控件实现): <UserControl x:Class="SunCreate.Vipf.Client.UI.CityDoor.PageCont ...
    
			
    2. 
						
  2. mysql数据库的常用知识
			
    问题一:如果使用可视化工具链接mysql? mysql默认情况下是不支持远程连接的!只需要几个步骤就能轻松搞定了. 1.vi /etc/mysql/my.cnf 修改里面bind-address项,将 ...
    
			
    3. 
						
  3. GCD on Blackboard
			
    题目大意:给你n个数,然后在这n个数中选一个数,选中的这个数可以变成任意的数,使这n个数的gcd(最大公约数)最大.打印这个最大的gcd. 思路:这题一看貌似很复杂,其实这题只要你知道前缀和  和   ...
    
			
    4. 
						
  4. redis 分布式读写锁
			
    http://zhangtielei.com/posts/blog-redlock-reasoning.html 链接里这篇 blog 讨论了 redis 分布式锁的实现以及安全性 我要参考 基于单R ...
    
			
    5. 
						
  5. 功能强大的swiper插件
			
    概述 今天体验了一下swiper,真是太强大了,无论是PC端还是移动端,各种轮播滑块效果随便实现.美中不足的是,有些实现需要自己想办法.下面我记录下我的需求和我的实现,供以后开发时参考,相信对其他人也 ...
    
			
    6. 
						
  6. Java学习笔记30（集合框架四：List接口）
			
    List接口继承自Collection接口 具有重要的三大特点: 1.有序集合:存入和取出的顺序一致 2.此接口的用户可以对列表中每个元素插入位置精确的控制:可以通过索引操作 3.可以存储重复元素 L ...
    
			
    7. 
						
  7. Docker部署Vue 工程包
			
    docker部署 Vue 工程包 目录结构 [root@host ~]# tree front/ front/ ├── dist.conf ├── dist.zip ├── Dockerfile └─ ...
    
			
    8. 
						
  8. python的数据驱动
			
    什么叫数据驱动? 登录用例 ->不用的用户名登录,但是自动化化脚本一样,虽然脚本相同,步骤相同,但是不同的用户名登录得出的数据是不一样的,于是就有了数据驱动,就是数据的改变驱动自动化测试的执行导 ...
    
			
    9. 
						
  9. 课程三(Structuring Machine Learning Projects)，第二周（ML strategy（2）） —— 0.Learning Goals
			
    Learning Goals Understand what multi-task learning and transfer learning are Recognize bias, varianc ...
    
			
    10. 
						
  10. salesforce lightning零基础学习(七) 列表展示数据时两种自定义编辑页面
			
    上一篇Lightning内容描述的是LDS,通过LDS可以很方便的实例化一个对象的数据信息.当我们通过列表展示数据需要编辑时,我们常使用两种方式去处理编辑页面:Pop Up Window弹出修改详情以 ...
    
			
    11.