2D、3D形变
一、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形变的更多相关文章
- FushionCharts Free 的运用[2D/3D图表处理]
由于先前在一些论坛中谈论到这个插件的运用,留了一些QQ联系方式,最近老是被一些程序员“骚扰”,说是请教一些关于FushionChart Free图表的处理技术,先前还是比较乐意接受的,但发现后来一些完 ...
- CSS自学笔记（13）:CSS3 2D/3D转换
CSS3中新增了对元素进行2D和3D的转换效果,这样可以是开发人员很方便的做出视觉效果更好的网页来. 通过CSS3中属性的定义,我们可以对元素进行移动.缩放.拉伸.旋转等等,可以通过定义transfo ...
- 基于 HTML5 Canvas 的简易 2D 3D 编辑器
不管在任何领域,只要能让非程序员能通过拖拽来实现 2D 和 3D 的设计图就是很牛的,今天我们不需要 3dMaxs 等设计软件,直接用 HT 就能自己写出一个 2D 3D 编辑器,实现这个功能我觉得成 ...
- 分享数百个 HT 工业互联网 2D 3D 可视化应用案例
过去的 2018 年,我们认为是国内工业互联网可视化的元年,图扑软件作为在工业可视化领域的重度参与者,一线见证了众多 HTML5/Web 化.2D/3D 化的项目在工业界应用落地,我们觉得有必要在此分 ...
- 盒子显隐，伪类边框，盒子阴影,2d平面形变
-盒子显隐 显隐的盒子尽量不影响其他盒子的布局 display:none; 消失的时候不占位置,显示的时候占位 opacity:0-1; 盒子透明度 overflow: hidden; 超出部分隐藏 ...
- 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 ...
- DirectUI 2D/3D 界面库集合 分析之总结
DirectUI优点在于能够非常方便的构建高效,绚丽的,非常易于扩展的界面.作者是Bjarke Viksoe, 他的这个界面程序思想和代码都很优秀,他的代码主要表述了他的思想,尽管bug比較多,可是很 ...
- 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 ...
- 分享数百个 HT 工业互联网 2D 3D 可视化应用案例之 2019 篇
继<分享数百个 HT 工业互联网 2D 3D 可视化应用案例>2018 篇,图扑软件定义 2018 为国内工业互联网可视化的元年后,2019 年里我们与各行业客户进行了更深度合作,拓展了H ...
随机推荐
- SQL数据库之DQL
初来乍到,我是一个Java行业的小学生,刚学半年. 今天老师讲了数据库的操作语句,在这里与大家分享一下我学到的知识吧,要是有不足的地方麻烦大家指出来,共同进步,共同提高! 1.数据库中的各种符号 %: ...
- SQL Server 无法连接到服务器。SQL Server 复制需要有实际的服务器名称才能连接到服务器。请指定实际的服务器名称。
异常处理汇总-数据库系列 http://www.cnblogs.com/dunitian/p/4522990.html SQL性能优化汇总篇:http://www.cnblogs.com/dunit ...
- C# Excel导入、导出【源码下载】
本篇主要介绍C#的Excel导入.导出. 目录 1. 介绍:描述第三方类库NPOI以及Excel结构 2. Excel导入:介绍C#如何调用NPOI进行Excel导入,包含:流程图.NOPI以及C#代 ...
- HTML 事件(一) 事件的介绍
本篇主要介绍HTML中的事件知识:事件相关术语.DOM事件规范.事件对象. 其他事件文章 1. HTML 事件(一) 事件的介绍 2. HTML 事件(二) 事件的注册与注销 3. HTML 事件(三 ...
- 前端制作动画的几种方式（css3，js）
制作动态的网页是是前端工程师必备的技能,很好的实现动画能够极大的提高用户体验,增强交互效果,那么动画有多少实现方式,一直对此有选择恐惧症的我就总结一下,以便在开发的时候选择最好的实现方式. 1.css ...
- .NET面试题集锦②（Part 二）
一.前言部分 文中的问题及答案多收集整理自网络,不保证100%准确,还望斟酌采纳. 1.实现产生一个int数组,长度为100,并向其中随机插入1-100,并且不能重复. ]; ArrayList my ...
- Linux命令【第三篇】
执行下面命令时发现提示需要输入密码,请问提示输入的密码是哪个用户的密码. [test@oldboy ~]$ sudo su - oldboy 解答: 输入当前执行命令test账户的密码. 相关说明: ...
- ubuntu15.04 nginx1.6.5 配置虚拟主机
1 在/etc/hosts 添加host 2 在/etc/nginx/nginx.conf中查看http里的include ****** /*.conf的路径,在此路径下添加一个新的******. ...
- ramdisk plus v11.5安装内存虚拟硬盘
ramdisk plus v11.5.桌面版操作及应用图解说明 一.ramdisk plus程序安装方法: 1.先安装英文原版软件(RamDisk-desktop.exe桌面版),安装路径不要更改,安 ...
- 关于我 — About Me
个人简介 姓名:周旭龙 关注:.NET开发技术.Web前端技术 邮箱:edisonchou@hotmail.com GitHub: https://github.com/edisonchou 主要经历 ...