css3的3d属性集合

想进入css3的3d世界必须知道一下几个属性及其用法。

当然在进入属性介绍之前我想你必须知道3维坐标,附上一张经典图如下:

我想不用解释了吧。之后要平移和旋转都是在这个基础之上的,认真看看吧骚年!!

perspective (英文解释:透镜,望远镜;观点,看法;远景,景色;洞察力):在这里做透镜的意思。

persperctive:none/number;这是它的格式.在css默认是none。啥意思呢?很简单,就是距离多远看某个元素。none即没有距离,所以默认情况下是没有3d效果。当这个number的值越大就是越远距离看元素!!聪明的人可能想到了下面一个问题,既然是看某个元素,那这个perspective属性是不是放在这某个值的父元素上呢?没错!!所以就引出一个问题,css的3d效果的html结构一般是怎么样的?如下:

  <div class="container">
<div class="piece-box">
<div class="piece piece-1"></div>
<div class="piece piece-2"></div>
<div class="piece piece-3"></div>
<div class="piece piece-4"></div>
<div class="piece piece-5"></div>
<div class="piece piece-6"></div>
</div>
</div>

简单解释一下:container的div是一个大容器,persperctive的视角就是从该容器去看包含许多piece的piece-box容器!!给定一个值以后就会从多远的距离看这个piece-box容器!!

你以为这样就可以形成了3d效果了吗?no

transform-style

没错,它是css中3D的关键, transform-style 默认是 flat ,如果你要在元素上视线3D效果的话,就必须用上 transform-style: preserve-3d ,否则就只是平面的变换,而不是3D的变换。即在刚才的piece-box上加上transform-style:preserve-3d;就会有3d效果了;

接下来介绍一个还与3d有关的属性:

perspective-origin

由上面我们了解了 perspective ,而加上了这个 origin 是什么,我们前面说的这个是眼睛离物体的距离,而这个就是眼睛的视线,我们的视点的不同位置就决定了我们看到的不同景象,默认是中心,为 perspectice-origin: 50% 50% ,第一个数值是 3D 元素所基于的 X 轴,第二个定义在 y 轴上的位置!!!

此时你做的每一个transform,translate,transiton,animation操作将都会是以3d效果出现。然而问题又来了,transform,translate,transiton,animation操作又有哪些?如何使用?真是一个馒头引发的血案啊。

css3的3d属性集合的更多相关文章

  1. 吃透css3之3d属性--perspective和transform

    本文为原创,转载请注明出处: cnzt 写在前面:最近写了个3d轮播效果图,在此将思路和过程中遇到的问题都记录下来. 首先,我们下来了解一下perspective和transform都是做什么的. t ...

  2. CSS3 《3D骰子 压大小》

    游戏在线预览地址:http://dtdxrk.github.io/game/3d-dice/index.html js判断一个随机数大小的游戏. 本来想用canvas做的,平面的生产一个点数,感觉没啥 ...

  3. HTML5培训入门基础知识了解CSS3 3D属性

    CSS3 3D 什么是3d的场景呢? 2d场景,在屏幕上水平和垂直的交叉线x轴和y轴 3d场景,在垂直于屏幕的方法,相对于3d多出个z轴 Z轴:靠近屏幕的方向是正向,远离屏幕的方向是反向 CSS3中的 ...

  4. css3的3D和2D

    css3的3D旋转:rorateX():参数为正值时,盒子是围绕x轴,完成从Y轴正方向到Y轴负方向的旋转,视觉上呈现高度上的变化.rorateY():参数为正值时,盒子是围绕Y轴,完成从X轴正方向到X ...

  5. 使用 CSS3 实现 3D 图片滑块效果【附源码下载】

    使用 CSS3 的3D变换特性,我们可以通过让元素在三维空间中变换来实现一些新奇的效果. 这篇文章分享的这款 jQuery 立体图片滑块插件,利用了 3D transforms(变换)属性来实现多种不 ...

  6. CSS3之3D变换实例详解

    CSS3的3D效果很赞,本文实现简单的两种3D翻转效果.首先看效果和源代码,文末是文绉绉的总结部分^_^ 以下CSS代码为了简洁没有添加前缀,请视情况自行添加(自动化时代推荐使用其他的一些方法,如gu ...

  7. 使用CSS3实现3D图片滑块效果

    使用 CSS3 的3D变换特性,我们可以通过让元素在三维空间中变换来实现一些新奇的效果. 这篇文章分享的这款 jQuery 立体图片滑块插件,利用了 3D transforms(变换)属性来实现多种不 ...

  8. HTML5和CSS3实现3D转换效果 CSS3的3D效果

    上次,我们一起研究了css3的2d模块,这次我们一起来看一下css3的3d模块. 首先,我们来了解一下3d的坐标系,x轴在屏幕上为水平方向,y轴为垂直方向,而z轴为垂直于屏幕的方向. 不理解的话可以参 ...

  9. 使用Jquery.js框架和CSS3实现3D相册的制作

    有关3D相册的制作主要包括以下几个知识点: 1.有关图片的位置摆放,也就是一个相对定位绝对定位的使用: 2.有关CSS3中transform属性的使用(transform-style: preserv ...

随机推荐

  1. QTP 无法识别web 大全

    说明:这里以一个登陆框为例,展示了各种方式供你选择. 假设你喜欢对象的话.也能够手动加入对象webedit. watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv ...

  2. ((void *) 0)的含义和void的一些细节

    一.在c语言中,0是一个特殊的值,它可以表示:整型数值0,空字符,逻辑假(false).表示的东西多了,有时候不好判断.尤其是空字符和数字0之间. 为了明确的指出,0是空字符的含义,用用到了: (() ...

  3. Unity3D发布安卓报错permisson denied的解决

    没有打开SD卡的写入权限 unity提供了sd卡权限修改的参数:

  4. Atitit. 脚本语言的断点单步调试的设计与实现 attialx 总结 php 参照java

    Atitit. 脚本语言的断点单步调试的设计与实现 attialx 总结 php 参照java 1. 断点的实现:手动断点 die和exit是等价的 1 2. 变量表的实现 1 3. print_r( ...

  5. OSGI 面向Java的动态模型系统

    OSGI (面向Java的动态模型系统) OSGi(Open Service Gateway Initiative)技术是Java动态化模块化系统的一系列规范.OSGi一方面指维护OSGi规范的OSG ...

  6. 神器 cmder

    神器 cmder .wmd-input, .wmd-input:focus, #md-section-helper {font-size: 14px !important;line-height: 2 ...

  7. mysql之mysqldump、mysqlimport

    一.引言 前一段在做一个csv的导入工具,最麻烦的部分就是对csv文件的解析,最后,老大提醒说是不是考虑的过于麻烦了,由于当时考虑到mysql是允许指定导出的csv文件的格式的,所以考虑到想要兼容这种 ...

  8. linux学习笔记18---目录结构

    对于每一个Linux学习者来说,了解Linux文件系统的目录结构,是学好Linux的至关重要的一步.,深入了解linux文件目录结构的标准和每个目录的详细功能,对于我们用好linux系统至关重要,下面 ...

  9. Github上Fork代码,及源码修改

    iOS开发中经常遇到这种情况,你使用的第三方库不能完全满足自己项目需要,只能修改源码来解决. 我们以前的解决办法是,添加到项目中直接修改源码.这样就有一个问题,不能和源库同步,当作者更新后你不能(po ...

  10. java 获取用户真实ip

    /** * 获取用户真实ip * @param request * @return */ public static String getIpAddr(HttpServletRequest reque ...