继续transform的3D用法:

  translate3d(x,y,z)定义3D转换

  transformX(x)只用x轴的值进行转换;

  transformY(y)只用y轴的值进行转换:

  transfornZ(z)只用z轴的值进行3d转换;

  scale缩放

  scale3d(x,y,z)定义3d的缩放

  scaleX(x)在x轴方向的缩放

  scaleY(y)在y轴方向进行缩放

  scaleZ(z)定义在z轴的方向进行缩放

  rotate旋转(deg角度)

  rotate3d(x,y,z,angle)定义3d的旋转

  rotateX(deg)定义x轴的旋转

  rotateY(deg) 定义y轴的旋转

  rotateZ(deg)定义Z轴的旋转

  matrix3d( n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)定义3d的转换,使用16个4乘4的矩形的值来定位。

  transform-origin:作用和2d的一样,都是改变变形的起点 z轴是3d的特有表现

  transform-style:规定被嵌套的元素如何在3d环境下显示:

    flat表示不保留在子元素的3d空间

    preserve-3d表示保留子元素的3d空间

  perspective-origin:规定3D元素的底部位置;目前浏览器都不支持;

  backface-visibility:定义元素在不面对屏幕时是否可见;浏览器支持度不好。

关于transform的3D变形函数的更多相关文章

  1. 3D变形旋转

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  2. css3 3D变形 入门(一)

    css3 3D.html div.oembedall-githubrepos { border: 1px solid #DDD; list-style-type: none; margin: 0 0 ...

  3. [Swift通天遁地]九、拔剑吧-(15)搭建具有滑出、视差、3D变形等切换效果的引导页

    ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...

  4. 9.css3动画-2D/3D变形--trasform

    transform: None不转换. Translate(x,y)通过设置X轴的值进行移动. translateY(y)通过设置Y轴的值进行移动. Scale(x,y)定义2D缩放. ScaleX( ...

  5. CSS3——2D变形和3D变形

    2D变形(CSS3) transform transform是CSS3中具有颠覆性的特征之一,可以实现元素的位移.旋转.倾斜.缩放,甚至支持矩阵方式,配合过渡和即将学习的动画知识,可以取代大量之前只能 ...

  6. Html CSS transform matrix3d 3D转场特效

    Html CSS transform matrix3d 3D转场特效 透视矩阵 2n/(r-l) 0 (r+l)/(r-l) 0 0 2n/(t-b) (t+b)/(t-b) 0 0 0 (n+f)/ ...

  7. deep_learning_Function_ Matplotlib 3D 绘图函数 plot_surface 的 rstride 和 cstride 参数

    今晚开始接触 Matplotlib 的 3D 绘图函数 plot_surface,真的非常强大,图片质量可以达到出版级别,而且 3D 图像可以旋转 ,可以从不同角度来看某个 3D 立体图,但是我发现各 ...

  8. transform做2d和3d变形(css动画一)

    前言:这是笔者学习之后自己的理解与整理.如果有错误或者疑问的地方,请大家指正,我会持续更新! 有段时间我是没理清transform.translate.transition和animation之间的关 ...

  9. css3中变形函数(同样是对元素来说的)和元素通过改变自身属性达到动画效果

    /*对元素进行改变(移动.变形.伸缩.扭曲)*/ .wrapper{ margin:100px 100px auto auto; width:300px; height:200px; border:2 ...

随机推荐

  1. 二维码开源库ZBar-实现中文解码

    中文乱码 上篇<ZBar-windows下编译和使用>已经成功解析了条形码,但目标是二维码,经测试二维码中文会出现乱码.下图二维码的内容是"http123测试456", ...

  2. 使用echarts水球图

    使用echarts水球图 官方实例中没有水球图样式,当我们需要用到水球图的时候需要下载echarts-liquidfill.js. 使用 在echarts之后引入 echarts-liquidfill ...

  3. smallcorgi/Faster-RCNN_TF训练自己的数据

    熟悉了github项目提供的训练测试后,可以来训练自己的数据了.本文只介绍改动最少的方法,只训练2个类, 即自己添加的类(如person)和 background,使用的数据格式为pascal_voc ...

  4. CometD的消息推送

    CometD 框架 CometD 框架是基于 HTTP 的事件驱动通信解决方案.CometD 框架提供了一个 Java 服务器部件和一个 Java 客户端部件,还有一个基于 jQuery 和 Dojo ...

  5. 安装php的memcached模块和扩展支持sasl

    memcached的1.2.4及以上增加了CAS(Check and Set)协议,对于同一key的多进行程的并发处理问题.这种情况其实根数据库很像,如果同时有几个进程对同一个表的同一数据进行更新的话 ...

  6. 隱藏在素數規律中的Pi -- BZOJ1041解題報告

    退役狗在刷程書的過程中看到了一個有趣的視頻, 講解了一個有趣的問題. 在網上隨便搜索了一下居然還真的找到了一道以它爲背景的OI題目, BZOJ1041. 下面的內容會首先回顧一下視頻所討論的知識, 有 ...

  7. wired-wireless_priority

    有线网卡和无线网卡同时上网,优先级切换的设置方法 默认有线网卡优先权高 Q:如果你想改为无线高,How do? A: ①进入网络属性的有线网卡的连接属性,选择TCP/IP属性,点"高级... ...

  8. MySQL如何正确查询字段为NULL的字段

    //++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ ...

  9. SQLSERVER中分割字符串成多列

    今天修改到之前的大佬的代码,居然把多个Id存在一个列里面,还是用的逗号分割...特么查询的时候怎么办??? 网上搜索了半天,终于找到了SqlServer里面有一个PARSENAME函数,可以按.(点) ...

  10. 《Java编程思想》读书笔记

    前言 这个月一直没更新,就是一直在读这本<Java编程思想>,这本书可以在Java业界被传神的一本书,无论谁谈起这本书都说好,不管这个人是否真的读过这本书,都说啊,这本书很好.然后再看这边 ...