html52D转换3D,CSS3 Transform 2D和3D转换
1.2 缩放
语法transform : scale(x,y);
-webkit-transform : scale(x,y);
根据倍数来缩放,取决于宽度(X轴)和高度(Y轴)的参数;也可以用一个参数,表示X轴和Y轴都按此倍数缩放
1.3 旋转
语法transform : rotate(deg);
-webkit-transform : rotate(deg)
单位:deg(度)
正值表示顺时针,负值表示逆时针 (如果不懂顺时针是哪个方向,请看看钟表走的方向就是顺时针)
1.4 倾斜
语法transform : skew( x ,y)
-webkit-transform : skew(x,y)
单位:deg
例子:transform:skew(15deg,0);
-webkit-transform:skew(15deg,0);
1.5 矩阵转换
matrix()
语法transform : matrix(n,n,n,n,n,n)
-webkit-transform : matrix(n,n,n,n,n,n)
二、3D转换
CSS3变形中具有X /Y可用的函数:translateX()、translateY()、scaleX()、scaleY()、skewX()和skewY()transform : translateX(x)
transform : translateY(y)
transform : scaleX(x)
transform : scaleY(y)
transform : skew(x)
transform : skew(y)
CSS3 3D变形包括函数有:rotateX()、rotateY()、rotate3d()、translateZ()、translate3d()、scaleZ()、scale3d()和matrix3d()。transform : rotateX(deg)
transform : rotateY(deg)
transform : rotate3d(x,y,z,angle)
transform : translateZ(z)
transform : translate3d(x,y,z)
transform : scaleZ(z)
transform : scale3d(x,y,z)
transform : matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)
因为很多人会搞错3d旋转,所以在这里,我们重点介绍一下rotate3d(x,y,z,angle):
rotate3d(x,y,z,angle)共有四个参数
x、y、z分别对应于X轴、Y轴、Z轴,默认值都为0;而angle就是旋转的角度
如果你要沿着该轴转动那就将该轴的值设置为1,否则为0;然后在后面的angle中设置旋转的角度,需要注意的是,angle只有一个角度值。
用法:transform : rotate3d(1,0,0,50deg) //绕着X轴顺时针旋转50度
三、其他属性
transform-origin 指定元素的中心点transform-style 规定被嵌套元素如何在 3D 空间中显示。当设置值为preserve-3d值,建立一个3D渲染环境。
perspective 属性相对于观众产生一个3D场景,你看3D物体,眼睛到画布的距离。正确的用法是他需要应用到变形元素的祖先元素上。
perspective-origin 为视点的位置。
backface-visibilty 属性用来设置背面的可见性。
3.1 transform-origin
指定元素的中心点
默认情况,变形的原点在元素的中心点,或者是元素X轴和Y轴的50%处。
还有一个新增的,transform-origin-z,控制元素三维空间中心点。
语法transform-origin: x-axis y-axis z-axis;
值:
x-axis(left,center,right,length,%)
y-axis(top,center,bottom,length,%)
z-axis(length)
2D的变形中的transform-origin属性可以是一个参数值,也可以是两个参数值。如果是两个参数值时,第一值设置水平方向X轴的位置,第二个值是用来设置垂直方向Y轴的位置。
而在3D的变形中的transform-origin属性还包括了Z轴的第三个值
例子:transform-origin: 50% 50%; //默认值
transform-origin : 50% 0; //也可以设为 center top
3.2 transform-style
规定被嵌套元素如何在 3D 空间中显示。
有两个值:
flat子元素将不保留其 3D 位置。
preserve-3d子元素将保留其 3D 位置。
当设置值为preserve-3d值,建立一个3D渲染环境。
3.3 perspective
属性相对于观众产生一个3D场景,你看3D物体,眼睛到画布的距离。取值越小,3D效果就越明显,也就是你的眼睛越靠近真3D。
正确的用法是他需要应用到变形元素的祖先元素上。
属性值:
number元素距离视图的距离,以像素计,不能用百分比。
none默认值。与 0 相同。不设置透视。
定义时的perspective属性,它是一个元素的子元素,透视图,而不是元素本身。
注意:
所有主流浏览器都不支持perspective属性。
Safari和Chrome使用私有属性-webkit-perspective获得支持。
为了更好的理解,下面我们来看一个例子:
div布局:
CSS样式:.page {
position: relative;
max-width: 640px;
width: 100%;
height: 100%;
margin: 0 auto;
background: #373737;
}
.cude{
position:absolute;
top:200px;
left:100px;
width: 100px;
-webkit-perspective: 1000px;
perspective: 1000px;
}
.dice {
position: absolute;
width: 100px;
height: 100px;
transform: rotateX(-15deg) rotateY(47deg);
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
}
.dice .side {
position: absolute;
display: block;
width: 100px;
height: 100px;
background: rgba(14,126,84,.5);
text-align: center;
line-height:100px;
color:#fff;
font-size:40px;
font-weight: bold;
border:1px solid #333;
}
.front{
transform:translateZ(50px);
}
.top{
transform: rotateX(90deg) translateZ(50px);
}
.bottom{
transform: rotateX(-90deg) translateZ(50px);
}
.left{
transform: rotateY(-90deg) translateZ(50px);
}
.right{
transform: rotateY(90deg) translateZ(50px);
}
.back{
transform: rotateY(-180deg) translateZ(50px);
}
通过改变perspective的值,我们可以很明显的看到效果:
属性解析:
perspective取值为none或不设置,就没有真3D空间。
perspective取值越小,3D效果就越明显,也就是你的眼睛越靠近真3D。
perspective的值无穷大,或值为0时与取值为none效果一样。
3.4 perspective-origin
perspective-origin 属性定义 3D 元素所基于的 X 轴和 Y 轴。该属性允许您改变 3D 元素的底部位置。
定义时的perspective -origin属性,它是一个元素的子元素,透视图,而不是元素本身。
3.5 backface-visibility
属性值:
visible背面是可见的。
hidden背面是不可见的。
例子:
右边的div加了backface-visibility:hidden;
样式:.box{
width:100px;
height:100px;
background:green;
float:left;
transform-style: preserve-3d;
transition:all 1s;
}
.box:hover{
transform:rotateY(180deg);
}
.backface{
backface-visibility:hidden;
}
四、兼容性
Internet Explorer使用私有属性-ms-Transform-origin支持(仅2D转换)。
Firefox使用私有属性-MOZ-Transform-origin支持(仅2D转换)。
Opera使用私有属性-O-Transform-origin支持(仅2D转换)。
Safari和Chrome使用私有属性-WebKit-Transform-origin支持(3D和2D变换)。
html52D转换3D,CSS3 Transform 2D和3D转换相关推荐
- CSS3之2D与3D转换
在CSS3中新增了很多关于2D和3D转换的标准,它允许将页面元素在2D和3D空间内进行移动.缩放.旋转.倾斜等.所谓的2D转换,指的是元素可以在平面内进行位置或形状的转换,而3D转换指的是元素可以在三 ...
- CSS3 transform 2D变幻,过渡
transform 2D变幻 注意 transform无法作用于 行内元素 容许元素在2D平面上进行变幻 包括 平移(translate) 旋转(rotate) 缩放(scale) 倾斜(skew) ...
- CSS3之2D与3D变换
文章出自个人博客https://knightyun.github.io/2019/01/27/css-transform,转载请申明 文章目录 关于坐标轴 2D变换 translate(x,y) ro ...
- CSS3的2D、3D变换、过度与动画效果
1. 2D转换方法 在2D转换方法中,存在对元素进行旋转.缩放.拉伸.移动的属性效果.此处主要讲解transform属性中的旋转和缩放.位移效果. 1.1 旋转rotate() 通过下述代码的设置可以 ...
- CSS3的2D转换和3D转换,你了解了嘛?
css3的2D转换和3D转换 CSS3大纲: 本次讲解css3带来了两种转换:2D转换和3D转换 1. 2D转换 转换( transform)是CSS3中具有颠覆性的特征之一,可以实现元素的位移(tr ...
- 2d的公式_用深度学习实现 2D 到 3D 的转换
随着 5G 时代的到来,VR 端应用呈爆发式增长,3D 内容作为构建 VR 生态的主力输出一直深受广大用户的追捧和喜爱.针对目前 3D 内容过少,质量不高.生产昂贵等现状,爱奇艺作为国内领先的互联网视 ...
- 双目相机定位3d python_用深度学习实现 2D 到 3D 的转换
随着 5G 时代的到来,VR 端应用呈爆发式增长,3D 内容作为构建 VR 生态的主力输出一直深受广大用户的追捧和喜爱.针对目前 3D 内容过少,质量不高.生产昂贵等现状,爱奇艺作为国内领先的互联网视 ...
- 学术派 |用深度学习实现2D到3D的转换
随着 5G 时代的到来,VR 端应用呈爆发式增长,3D 内容作为构建 VR 生态的主力输出一直深受广大用户的追捧和喜爱.针对目前 3D 内容过少,质量不高.生产昂贵等现状,爱奇艺作为国内领先的互联网视 ...
- 如何使用3D Converter将2D视频转换为3D?
3D Converter for Mac是一款3D转换软件,能够将普通 2D 视频转换为 3D视频,还可以将 3D 视频转换为 3D 视频(不同模式)以及将 3D 视频转换为 2D 视频.那么如何使用 ...
最新文章
- 重定向后,如何通过浏览器返回定向之前的页面?
- 关系型数据库 和 非关系型数据对比 以及 MySQL与Oracle对比
- spring boot jpa级联保存
- TF版本升级问题集合:成功解决由于不同的TensorFlow版本之间某些函数的用法引起的错误
- 7-28 搜索树判断 (25 分)(思路加详解) just easy!
- python词频统计完整步骤_Python中文文本分词、词频统计、词云绘制
- MATLAB矩阵对称旋转
- python docx包_[Python02] Python-docx包的使用,快速处理 Word 文件!
- 中标麒麟安装rpm包命令_在 Fedora 中安装替代版本的 RPM 包
- python路径设置方法,R不转义,以及r转义出错SyntaxError
- 【模板】ISAP最大流
- 走在“辞职”路上的数据科学家们!
- vector的常用总结
- ora hash oracle官网,oracle计算hash值
- Android截图命令screencap
- Mixly-RFID智能门禁
- hsql导入mysql_关于HSQLDB访问已有数据库文件的操作说明
- mc服务器资源包在什么文件夹,资源包
- GSMA TAC核发及IMEI编码规则
- 相伴女人一生的爱情语录[组图]
热门文章
- C#中一些常用的方法使用
- 2020下半场:10本书教会你学习、思考和生活
- 戳破“砖家”假面:唯快不破的时代,为什么这件事一定要慢慢做?
- 成为被 BAT 疯抢的数据分析师,要如何精进技术?
- FreeModbus移植到STM32F107(以太网传输方式)
- java输入年月输出日历_java输入年份打印该年份的年历
- 电信业务分类目录_第五大运营商!中信网络获基础电信业务牌照
- 建站用什么cms_我想做独立站,我应该用什么建站工具?
- InnoDB原理篇:Change Buffer是如何提升索引性能的?
- 微服务面试必问的Dubbo,这么详细还怕自己找不到工作?