CSS3 Tranform 3D 的应用

一、perspective 属性

1. 作用：

设置元素被查看位置的视图，类似于眼睛到屏幕的距离，一般跟 perspective-origin 共同作用在一个父元素上

  • 属性值 = 屏幕分辩率 * 屏幕和我们眼睛的距离

  • 当为元素定义 perspective 属性时，其子元素会获得透视效果，而不是元素本身

  • perspective 属性只影响 3D 转换元素

2. 作用范围

  • 舞台效果： 作用在 transform 属性元素的父元素上，里面的元素都会受到改属性的影响，而且显示的效果跟子元素在父元素的位置有关系。

    perspective: 200px

  • 单个元素：和 transform 属性 共同作用在同一元素中：

    transform: perspective(500px) rotateY(45deg);

二、transform 属性

1. 属性：

  • translateZ: 元素向着它朝的方向（也就是其经过rotate之后） “走出去” 的距离
  • rotateX( xx deg)
  • rotateY( xx deg)
  • rotateZ( xx deg)
  • ...

三、perspective-origin 属性

1. 作用

设置 3D 元素的基点位置（也就是我们眼睛看的位置），默认就是所看舞台或元素的中心

  1. perspective-origin: 25% 75%;

四、transform-style

1. 作用

利用该属性可以使被转换的子元素（不是后代）保留其 3D 转换：

  1. transform-style: preserve-3d / flat

五、backface-visibility

1. 作用

该属性定义当元素不面向屏幕时（前面有3d元素挡住时）是否可见，可以想象各个面连成一个实体的形状，后面的面会被前面的面挡住看不见。

  1. backface-visibility : hidden / visible;
  • 为每个面设置 backface-visibility: visible，默认值就是 visible

  • 为每个面设置 backface-visibility: hidden

​

六、例子

  1. <body>
  2.     <div class="center showbf">
  3.         <div class="cube">
  4.         <div class="face front">1</div>
  5.         <div class="face back">2</div>
  6.         <div class="face right">3</div>
  7.         <div class="face left">4</div>
  8.         <div class="face top">5</div>
  9.         <div class="face bottom">6</div>
  10.         </div>
  11.     <div>
  12. </body>
  1. .hidebf div {
  2.     backface-visibility: hidden;
  3.     -webkit-backface-visibility: hidden;
  4. }
  5. .showbf div {
  6.     backface-visibility: visible;
  7.     -webkit-backface-visibility: visible;
  8. }
  10. .center{
  11.     margin: auto;
  12.     margin-top: 100px;
  13.     width: 80%;
  14.     height: 300px;
  15.     border: 1px solid;
  16.     perspective: 200px;          /* prespective 和 perspective-origin 一般一起在外层元素上使用 */
  17.     perspective-origin: 50% 5%;  /* **** */
  18. }
  20. .cube {
  21.     width: 100px;
  22.     height: 100px;
  23.     margin: auto;
  24.     margin-top: 100px;
  25.     transform-style: preserve-3d;   /* 让多个子元素之间的 3D 关系像我们想象一样呈现 */
  26.     transition: 1s ease;
  27.     transform: rotateY(0deg);  /* 改变角度看 */
  28. }
  29. .face {
  30.     display: block;
  31.     position: absolute;
  32.     width: 100px;
  33.     height: 100px;
  34.     border: none;
  35.     line-height: 100px;
  36.     font-family: sans-serif;
  37.     font-size: 60px;
  38.     color: white;
  39.     text-align: center;
  40. }
  42. /* Define each face based on direction */
  43. .front {
  44.     background: rgba(0, 0, 0, 0.3);
  45.     transform: translateZ(80px);
  46. }
  47. .back {
  48.     background: rgba(0, 255, 0, 1);
  49.     color: black;
  50.     transform: rotateY(180deg) translateZ(80px);
  51. }
  52. .right {
  53.     background: rgba(196, 0, 0, 0.7);
  54.     transform: rotateY(90deg) translateZ(80px);
  55. }
  56. .left {
  57.     background: rgba(0, 0, 196, 0.7);
  58.     transform: rotateY(-90deg) translateZ(80px);
  59. }
  60. .top {
  61.     background: rgba(196, 196, 0, 0.7);
  62.     transform: rotateX(90deg) translateZ(80px);
  63. }
  64. .bottom {
  65.     background: rgba(196, 0, 196, 0.7);
  66.     transform: rotateX(-90deg) translateZ(80px);
  67. }

上面如果把 div class="cube" 的元素旋转 rotateY(30deg) 其效果如下：

但是如果把 prespective 从 cube 的父元素移到 cube 上，其旋转效果如下：

参考：

好吧，CSS3 3D transform变换，不过如此！

注意

转载、引用，但请标明作者和原文地址

CSS3 Tranform 3D 的应用的更多相关文章

  1. 网页特效：用CSS3制作3D图片立方体旋转特效

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  2. css3的3D和2D

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

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

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

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

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

  5. CSS3 transforms 3D翻开

    R T L B   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w ...

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

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

  7. 一款基于css3的3D图片翻页切换特效

    今天给大家分享一款基于css3的3D图片翻页切换特效.单击图片下方的滑块会切换上方的图片.动起你的鼠标试试吧,效果图如下: 在线预览   源码下载 实现的代码. html代码: <div id= ...

  8. 基于css3的3D立方体旋转特效

    今天给大家分享一款基于css3的3D立方体旋转特效.这款特效适用浏览器:360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗. 不支持IE8及以下浏览器.效果图如下 : ...

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

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

随机推荐

  1. SPOJ Highways [矩阵树定理]

    裸题 注意: 1.消元时判断系数为0,退出 2.最后乘ans要用double.... #include <iostream> #include <cstdio> #includ ...

  2. JavaWeb项目架构之NFS文件服务器

    NFS简介 NFS(Network File System)即网络文件系统. 主要功能:通过网络(局域网)让不同的主机系统之间可以共享文件或目录. 主要用途:NFS网络文件系统一般被用来存储共享视频, ...

  3. 学习docker on windows (1): 为什么要使用docker

    为什么要用Docker? 如果我们想使用某种pc软件, 那么在互联网上查找并安装软件的流程大致如下图: 那么这就有几个问题要弄清楚: 从哪里获得软件 App Store Linux的包管理 从某些网站 ...

  4. jquery对象和DOM对象的区别和转换

    jquery对象和DOM对象的区别和转换 在使用jquery时,我们直接通过jq的选择器获取元素,然后对元素进行操作,用jq选择器获取到的对象是一个jq对象,jq对象能够使用jq提供的方法,但是不能用 ...

  5. javac编译乱码

    PersonTest.java:1: 错误: 非法字符: \65279 解决途径如下 用记事本打开java源文件,另存为ANSI格式 如果java文件包含中文字符,使用-encoding gbk格式进 ...

  6. location对象浅探

  7. git添加本地仓库与远程仓库连接

    在本地建立一个文件夹,需要与远程git仓库进行连接,具体方法: <1>首先进入所在文件目录执行:  git init 初始化git,紧接着 git  add . git commit -m ...

  8. 关于echarts 报错 初始化对象未定义

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  9. 怎么添加用户到sudo用户组

    跨平台系列汇总:http://www.cnblogs.com/dunitian/p/4822808.html#linux 前段时间用Ubuntu的sudo用惯了,回到kali发现自己的用户太low了, ...

  10. JavaScript数据迭代方法差别

    js有很多总接待方法,ES6之后又新增了几个: 这里主要讨论数组迭代遍历的方法所以不会细讲for...in... ES5.ES6数组迭代方法有: forEach map filter some eve ...