一、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. 干货分享：让你分分钟学会 JS 闭包

    闭包,是 Javascript 比较重要的一个概念,对于初学者来讲,闭包是一个特别抽象的概念,特别是ECMA规范给的定义,如果没有实战经验,很难从定义去理解它.因此,本文不会对闭包的概念进行大篇幅描述 ...

  2. .NET Core 系列5 ：使用 Nuget打包类库

    NuGet是个开源项目,项目包括 NuGet VS插件/NuGet Explorer/NuGetServer/NuGet命令行等项目,.NET Core项目完全使用Nuget 管理组件之间的依赖关系, ...

  3. Kooboo CMS技术文档之五：站点配置管理

    站点关系 管理站点间的关系,站点可以有子站点,子站点继承父站点的部分配置数据,同时子站点还可以根据需要,本地化由父站点继承而来的数据.通过继承和本地化,可以让子站点在用最小的改动代价,来完成一个与父站 ...

  4. Java 8五大主要功能为开发者提供了哪些便利？

    两年前当Java 8发布后,立即受到了业界的欢迎,因为它大大提高了Java的性能.它独特的卖点是,顾及了编程语言的每一个方面,包括JVM(Java虚拟机)和编译器,并且改良了其它帮助系统. Java是 ...

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

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

  6. c# Enumerable中Aggregate和Join的使用

    参考页面: http://www.yuanjiaocheng.net/ASPNET-CORE/asp.net-core-environment.html http://www.yuanjiaochen ...

  7. AspNetPager分页控件样式的使用

    分页是Web应用程序中最常用到的功能之一,AspNetPager  简单实用,应用到项目后台中,棒极了! 自定义样式: <style type="text/css"> ...

  8. samba服务

    安装samba服务步骤ps -e 查看进程ps -e | grep 文件名 管道符的使用rpm -qa 安装包的查看rpm -qa | grep samba 抓Samba安装包 注释:包与包之间有依赖 ...

  9. JavaMail发送邮件

    发送邮件包含的内容有: from字段  --用于指明发件人 to字段      --用于指明收件人 subject字段  --用于说明邮件主题 cc字段     -- 抄送,将邮件发送给收件人的同时抄 ...

  10. Openfire集群源码分析

    如果用户量增加后为了解决吞吐量问题,需要引入集群,在openfire中提供了集群的支持,另外也实现了两个集群插件:hazelcast和clustering.为了了解情况集群的工作原理,我就沿着open ...