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 元素的基点位置（也就是我们眼睛看的位置），默认就是所看舞台或元素的中心

perspective-origin: 25% 75%;

四、transform-style

1. 作用

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

transform-style: preserve-3d / flat

五、backface-visibility

1. 作用

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

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

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

​

六、例子

<body>

    <div class="center showbf">

        <div class="cube">

        <div class="face front">1</div>

        <div class="face back">2</div>

        <div class="face right">3</div>

        <div class="face left">4</div>

        <div class="face top">5</div>

        <div class="face bottom">6</div>

        </div>

    <div>

</body>


.hidebf div {

    backface-visibility: hidden;

    -webkit-backface-visibility: hidden;

}

.showbf div {

    backface-visibility: visible;

    -webkit-backface-visibility: visible;

}

.center{

    margin: auto;

    margin-top: 100px;

    width: 80%;

    height: 300px;

    border: 1px solid;

    perspective: 200px;          /* prespective 和 perspective-origin 一般一起在外层元素上使用 */

    perspective-origin: 50% 5%;  /* **** */

}

.cube {

    width: 100px;

    height: 100px;

    margin: auto;

    margin-top: 100px;

    transform-style: preserve-3d;   /* 让多个子元素之间的 3D 关系像我们想象一样呈现 */

    transition: 1s ease;

    transform: rotateY(0deg);  /* 改变角度看 */

}

.face {

    display: block;

    position: absolute;

    width: 100px;

    height: 100px;

    border: none;

    line-height: 100px;

    font-family: sans-serif;

    font-size: 60px;

    color: white;

    text-align: center;

}

/* Define each face based on direction */

.front {

    background: rgba(0, 0, 0, 0.3);

    transform: translateZ(80px);

}

.back {

    background: rgba(0, 255, 0, 1);

    color: black;

    transform: rotateY(180deg) translateZ(80px);

}

.right {

    background: rgba(196, 0, 0, 0.7);

    transform: rotateY(90deg) translateZ(80px);

}

.left {

    background: rgba(0, 0, 196, 0.7);

    transform: rotateY(-90deg) translateZ(80px);

}

.top {

    background: rgba(196, 196, 0, 0.7);

    transform: rotateX(90deg) translateZ(80px);

}

.bottom {

    background: rgba(196, 0, 196, 0.7);

    transform: rotateX(-90deg) translateZ(80px);

}

上面如果把 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. 前端系列之JavaScript基础知识概述

    ​微信公众号:compassblog 欢迎关注,欢迎转发,互相学习,共同进步! 有任何问题,请后台留言联系! 1.什么是JavaScript (1).JavaScript是web上一种功能强大的编程语 ...

  2. python装饰器探究与参数的领取

    首先上原文, 现在,假设我们要增强now()函数的功能,比如,在函数调用前后自动打印日志,但又不希望修改now()函数的定义,这种在代码运行期间动态增加功能的方式,称之为"装饰器" ...

  3. Java中的Throable类是不是受查异常？

    Q: Throable是不是受查异常? A: 是 在Java规范中,对非受查异常和受查异常的定义是这样的: The unchecked exception classes are the run-ti ...

  4. 017 Java中的静态代理、JDK动态代理、cglib动态代理

    一.静态代理 代理模式是常用设计模式的一种,我们在软件设计时常用的代理一般是指静态代理,也就是在代码中显式指定的代理. 静态代理由业务实现类.业务代理类两部分组成.业务实现类负责实现主要的业务方法,业 ...

  5. 织梦默认编辑器 按下回车生成br标签改为生成p标签

    找到文件 \include\ckeditor\config.js 把 config.enterMode = CKEDITOR.ENTER_BR; config.shiftEnterMode = CKE ...

  6. 2、flask之基础知识点

    本篇导航: 路由系统 视图函数 请求与响应 模版语法 session 蓝图(blueprint).闪现 (flash) 扩展 一.路由系统 1.可传入参数: @app.route('/user/< ...

  7. 【ASP.NET Core】处理异常（下篇）

    上一篇中,老周给大伙伴们扯了有关 ASP.NET Core 中异常处理的简单方法.按照老周的优良作风,我们应该顺着这个思路继续挖掘. 本文老周就不自量力地介绍一下如何使用 MVC Filter 来处理 ...

  8. echarts legend 重叠 （转载）

    解决方案:  1. 调整option中的grid.top值才能避免重叠:(可以设置定制,也可以定义了一个计算公式) 2. 文档注明[特殊字符串 ''(空字符串)或者 '\n' (换行字符串)用于图例的 ...

  9. iOS 添加WKWebView导致控制器无法释放的问题

    在WkWebView与JavaScript交互中,经常会在原生中注入MessageHandler,app中注入MessageHandler的方法 WKWebViewConfiguration *con ...

  10. php的内置函数debug_backtrace()与get_included_files()跟踪代码调用(Thinkphp框架举例)

    debug_backtrace() 在我们开发一个项目中,或者二开研究某个开源程序,需要对代码流程一步步去跟踪,来研究它的逻辑,才可以进行修改,达到我们的开发目的.php的内置函数debug_back ...