一、2D形变：

　形变的属性名:transform

类型:

1.平移(translate)

2.缩放(scale)

3.倾斜(skew)

4.旋转(rotate)

demo中需要的图：

houRes/bg-grid.jpg：

houRes/cardKingClub.png

 <body>

     <div class="box">

         <img src="houRes/cardKingClub.png"/>

         <img src="houRes/cardKingClub.png" />

     </div>

 </body>
 //基本的css：

             .box{

                 width: 400px;

                 height: 400px;

                 background: url(houRes/bg-grid.jpg) no-repeat red;

                 /*background-size:支持百分比,百分比是基于box的大小而言,第一个是水平方向

 7                  第二个是垂直方向*/

                 background-size: 100% 100%;

                 position: relative;

             }

             img{

                 width: 100px;

                 height: 150px;

                 /*宽度明确,借助绝对定位,left: 0;right: 0;margin:0 auto;实现左右居中*/

                 position: absolute;

                 left: 0;

                 right: 0;

                 top: 0;

                 bottom: 0;

                 margin: auto;

             }

             .box img:first-child{

                 opacity: 0.5;

             }
     .box img:last-child{

                 /*1.平移:translate

 3                      translateX:水平方向

 4                      translateY:垂直方向

 5                      值为px或是百分比,百分比就是基于设置样式的标签本身的大小,

 6                        x:width,y:height

 7                      合起来写:translate(X,Y)[用逗号隔开]

 8                 */

                 transform: translateX(20px) translateY(20px);

                 /*transform: translate(20px ,20px);*/

                 /*transform: translate(20px);*/

         }

效果图：

        .box img:last-child{

               /*2.缩放:

                     scaleX

                     scaleY

                     值为倍数,1=1倍

                     值为负数时,先翻转后缩放

                     合写:transform:scaleX(X,Y);

             */

            transform:  scaleX(0.6)  scaleY(-0.6);

            /*transform:scale(-0.5,0.5);*/

        {

效果图：

         .box img:last-child{

             /*倾斜skew

 3                  单位是deg

 4                  当倾斜为90deg会消失不见

 5                  skew(x,y);

 6              */

             transform:skewX(45deg) skewY(0deg);

          }

效果图：

 1    .box img:last-child{

 2              /*旋转rotate

 3                  单位:deg

 4                  默认点:中心的

 5                   正角度:顺时针旋转

 6                   负角度:逆时针旋转

 7               */

 8              /*transform:rotate(45deg)*/

 9              /*更改旋转的源点

10                       origin

11                  默认值:center center

12                   left top:左上角点

13                   left bottom

14                   right top

15                   left=left center

16                       */

17                 transform-origin:left top;

18                 transform:rotate(45deg)

19            }

效果图：

所有的属性都支持形变的:

transform:多组形变用空格

background:多组之间用","号

形变中平移其实真正的位置没有改变,移动就是个假象

 二、3D形变　

想要展示子元素的3d效果，必须要给子元素的父级添加：

transform-style:preserve-3d;属性和属性值,默认值为flat:平面展示(2d)　　

　　平移：translate3d(x,y,z)　　　　　　　　

　　缩放：scale3d(X,Y,Z)

　　旋转：transform :rotate3d(x,y,z,旋转度数);

* 当x,y,z的值为1时,就代表在该轴上进行旋转,度数为第四个参数

2D、3D形变的更多相关文章

  1. FushionCharts Free 的运用[2D/3D图表处理]

    由于先前在一些论坛中谈论到这个插件的运用,留了一些QQ联系方式,最近老是被一些程序员“骚扰”,说是请教一些关于FushionChart Free图表的处理技术,先前还是比较乐意接受的,但发现后来一些完 ...

  2. CSS自学笔记（13）:CSS3 2D/3D转换

    CSS3中新增了对元素进行2D和3D的转换效果,这样可以是开发人员很方便的做出视觉效果更好的网页来. 通过CSS3中属性的定义,我们可以对元素进行移动.缩放.拉伸.旋转等等,可以通过定义transfo ...

  3. 基于 HTML5 Canvas 的简易 2D 3D 编辑器

    不管在任何领域,只要能让非程序员能通过拖拽来实现 2D 和 3D 的设计图就是很牛的,今天我们不需要 3dMaxs 等设计软件,直接用 HT 就能自己写出一个 2D 3D 编辑器,实现这个功能我觉得成 ...

  4. 分享数百个 HT 工业互联网 2D 3D 可视化应用案例

    过去的 2018 年,我们认为是国内工业互联网可视化的元年,图扑软件作为在工业可视化领域的重度参与者,一线见证了众多 HTML5/Web 化.2D/3D 化的项目在工业界应用落地,我们觉得有必要在此分 ...

  5. 盒子显隐，伪类边框，盒子阴影,2d平面形变

    -盒子显隐 显隐的盒子尽量不影响其他盒子的布局 display:none; 消失的时候不占位置,显示的时候占位 opacity:0-1; 盒子透明度 overflow: hidden; 超出部分隐藏 ...

  6. Asphyre Sphinx is a cross-platform framework for developing 2D/3D video games and interactive business applications

    Introduction Introduction Asphyre Sphinx is a cross-platform framework for developing 2D/3D video ga ...

  7. DirectUI 2D/3D 界面库集合 分析之总结

    DirectUI优点在于能够非常方便的构建高效,绚丽的,非常易于扩展的界面.作者是Bjarke Viksoe, 他的这个界面程序思想和代码都很优秀,他的代码主要表述了他的思想,尽管bug比較多,可是很 ...

  8. paper 157：文章解读--How far are we from solving the 2D & 3D Face Alignment problem?-(and a dataset of 230,000 3D facial landmarks)

    文章:How far are we from solving the 2D & 3D Face Alignment problem?-(and a dataset of 230,000 3D ...

  9. 分享数百个 HT 工业互联网 2D 3D 可视化应用案例之 2019 篇

    继<分享数百个 HT 工业互联网 2D 3D 可视化应用案例>2018 篇,图扑软件定义 2018 为国内工业互联网可视化的元年后,2019 年里我们与各行业客户进行了更深度合作,拓展了H ...

随机推荐

  1. 移动站应该尝试百度MIP的五个原因

    MIP是什么?MIP是百度在2016年提出的移动网页加速器项目. MIP能做什么?MIP能帮助站长和网站开发者快速搭建移动端页面. MIP怎么加速?MIP从前端渲染和页面网络传输两方面进行优化,杜绝页 ...

  2. 快速构建H5单页面切换骨架

    在Web App和Hybrid App横行的时代,为了拥有更好的用户体验,单页面应用顺势而生,单页面应用简称`SPA`,即Single Page Application,就是只有一个HTML页面的应用 ...

  3. iOS的ATS配置 - 2017年前ATS规定的适配

    苹果规定 从2017年1月1日起,新提交的 app 不允许使用NSAllowsArbitraryLoads来绕过ATS(全称:App Transport Security)的限制. 以前为了能兼容ht ...

  4. Xamarin+Prism开发详解四：简单Mac OS 虚拟机安装方法与Visual Studio for Mac 初体验

    Mac OS 虚拟机安装方法 最近把自己的电脑升级了一下SSD固态硬盘,总算是有容量安装Mac 虚拟机了!经过心碎的安装探索,尝试了国内外的各种安装方法,最后在youtube上找到了一个好方法. 简单 ...

  5. Twproject Gantt开源甘特图功能扩展

    1.Twproject Gantt甘特图介绍 Twproject Gantt 是一款基于 jQuery 开发的甘特图组件,也可以创建其它图表,例如任务树(Task Trees).内置编辑.缩放和 CS ...

  6. 浅谈JSP注释

    HTML注释 JSP文件是由HTML尿急和嵌入的Java程序片段组成的,所以在HTML中的注释同样可以在JSP文件中使用.注释格式:<!--注释内容--> <!-- 欢迎提示信息! ...

  7. 【JS基础】对象

    delete 可以删除对象属性及变量 function fun(){ this.name = 'mm'; } var obj = new fun(); console.log(obj.name);// ...

  8. Oracle 分页

    --1:无ORDER BY排序的写法.(效率最高) --(经过测试,此方法成本最低,只嵌套一层,速度最快!即使查询的数据量再大,也几乎不受影响,速度依然!) SELECT * FROM (SELECT ...

  9. CYQ.Data V5 从入门到放弃ORM系列：教程 - MProc类使用

    MProc介绍 MProc:是一个用于执行SQL或存储过程的数据库操作类,它轻量高性能地类似于Dapper. MProc:它出现的场景很少,因为MAction自身就能处理掉90%-100%的数据操作( ...

  10. About me

    stay hungry, stay foolish VaJoy / 蓝邦珏 Addr:Tencent Shenzhen E-Mail:vajoy@qq.com 站内:http://space.cnbl ...