3D

transform:rotate3d(x,y,z,a)

(0.6,1,0.5,45deg)

transform-origin 允许改变转换元素的位置,(中心点）

transform-style 嵌套元素在3D空间如何显示（舞台）

perspective 规定3D元素的透视效果

perspective                          （视角）

origin                     规定3D元素的底部位置

backface-visbility   元素在不面对屏幕时是否可见

transform-origin：x-axis y-axis z-axis

x-axis\y-axis的值：left、center、right、length、%

z-axis的值：length

perspective：number(px) none[元素视图的距离）

transform-style:flat(子元素将不保留其3D效果）

preseve-3d(子元素将保留3D效果）

transform:scaleZ(5) rotateX(30deg)

scaleZ 单独使用会失效，需要配合其他元素

3D效果的更多相关文章

  1. 3d效果的图片轮播

    CSS3的3d变换 CSS3给我们提供了一个新的功能,那就是3d变换.3d变换和2d变换的基本API函数类似,只不过多了些在Z轴上的操作,不难使用. 但是,为了让元素拥有3d变换的功能,我们需要给他的 ...

  2. jQuery旋转木马仿3D效果的图片切换特效代码

    用jQuery实现的一款仿3D效果的图片切换特效代码,类似旋转木马一样,幻灯图片以三维视觉上下滑动切换,效果很酷炫,兼容IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜 ...

  3. CSS3打造3D效果——perspective transform的深度剖析

    声明:此篇博文虽是自己手写,但大量资源取自 张鑫旭 的博文.想看更详细 更专业的剖析请看张鑫旭的博文. 昨天对css3的transform做了初步的分析和认识,突然看到perspective属性,调了 ...

  4. CSS3 文本3D效果

    代码如下: <!DOCTYPE html> <html> <head> <style> h1 { color: #3D3D3D; font-size: ...

  5. css3 3d效果及动画学习

    css参考手册: http://www.phpstudy.net/css3/ http://www.css88.com/book/css/ 呈现3d效果:-webkit-transform-style ...

  6. 网页3D效果库Three.js初窥

    网页3D效果库Three.js初窥 背景 一直想研究下web页面的3D效果,最后选择了一个比较的成熟的框架Three.js下手 ThreeJs官网 ThreeJs-github; 接下来我会陆续翻译 ...

  7. 视频特效制作：如何给视频添加边框、水印、动画以及3D效果

    2014-12-08 09:47 编辑: suiling 分类:iOS开发 来源:叶孤城的blog 招聘信息: iOS手机软件开发工程师 iOS工程师 Web后端高级开发工程师 iOS软件工程师 ja ...

  8. 图片设置3D效果

    /** * 图片绘制3d效果 * @param srcImage * @param radius * @param border * @param padding * @return * @throw ...

  9. 火狐的打开3D效果

    最近研究网页的时候,想看看一个页面中盒子的层次问题,点击右键查看元素的后,没有发现3D效果的按钮. 在网上百度后说要什么显卡支持,以为是公司的电脑用的是集显,就没有这个功能.回去用自己的笔记本后,发现 ...

  10. android自己定义ViewPager之——3D效果应用

    今天在github里看到一个3D效果的ViewPager,感觉做出来的ViewPager滑动的时候效果十分的炫,就check out下来研究了一下怎样实现的.以及怎样使用.将整个ViewPager稍加 ...

随机推荐

  1. LUN

    1概念 LUN的全称是Logical Unit Number,也就是逻辑单元号.我们知道SCSI总线上可挂接的设备数量是有限的,一般为8个或者16个,我们可以用Target ID(也有称为SCSI I ...

  2. solr特点三: 基于Solr实现排序定制化参考

    排序实现有N种形式,最低成本.最快响应时间是目标 一份索引,支持N种排序策略并且在线互不干扰是要考虑的每一种实现,处理的场景是不同的,不要千篇一律 020排序,从索引到效果,有不少坑,这篇文章没有细说 ...

  3. ASP.NET Core学习指导

    ASP.NET Core 学习指导 "工欲善其事必先利其器".我们在做事情之前,总应该做好充分的准备,熟悉自己的工具.就像玩游戏有一些最低配置一样,学习一个新的框架,也需要有一些基 ...

  4. NOI2019省选模拟赛 第六场

    传送门 又炸了-- \(A\) 唐时月夜 不知道改了什么东西之后就\(A\)掉了\(.jpg\) 首先,题目保证"如果一片子水域曾经被操作过,那么在之后的施法中,这片子水域也一定会被操作&q ...

  5. 渗透日常之 花式实战助你理解CSRF

    本文作者:i春秋签约作家——onls辜釉 最近比较忙,很久没发文章了,Onls本就只是一个安全爱好者,工作也不是安全相关.以往的文章也更像是利用简单漏洞的“即兴把玩”,更多的是偏向趣味性,给大家增加点 ...

  6. Android 线刷小白教程

    Android 线刷小白教程 再说一遍,绝不使用刷机精灵等软件. 一.概念 安卓系统一般把rom芯片分成7个区,如果再加上内置sd卡这个分区,就是8个: hboot分区----------负责启动. ...

  7. Ambiguous mapping found. Cannot map 'XXXController' bean method

    springMVC报错,原因方法之间@RequestMapping()到了同一个地址,导致springmvc无法定位

  8. git简易入门(github)

    本文讲解下git的使用,包括使用git上传项目工程到github,以及错误解决. 1.安装git 使用apt-get安 sudo apt-get update sudo apt-get install ...

  9. python 爬恶魔法则(单线程卡成狗)

    from bs4 import BeautifulSoupimport requestsimport sysclass down(object): def __init__(self): self.n ...

  10. Centos7.4下安装Nginx

    一.下载Nginx Nginx下载地址:http://nginx.org/en/download.html Nginx是C语言开发的,建议在Linux上运行.由于Nginx的一些模块依赖一些lib,所 ...