关于transform的3D变形函数

2024-05-09 11:20:45

　　继续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：定义元素在不面对屏幕时是否可见；浏览器支持度不好。

转载于:https://www.cnblogs.com/l8l8/p/8016438.html

关于transform的3D变形函数相关推荐

过渡、变形 transform、3d变形、关键帧动画13
day13 动画: 过渡, 变形, 关键帧动画过渡从一个状态到另外一个状态 (两个状态的连接最初,最终)的变化 ,并且时间的持续 transition: 要过渡的属性持续时间s/ms 运动的曲 ...
CSS3 transform变形属性、2D变形、3D变形
第十五章:transform变形属性一.2D变形 1. rotate()旋转属性值 2. translate()位移属性值 3. scale()缩放属性值 4. skew()倾斜属性值 5. tra ...
CSS3 Transform 【3D 】
三维变换使用基于二维变换的相同属性,如果您熟悉二维变换,你们发现3D变形的功能和2D变换的功能相当类似.CSS3中的3D变换主要包括以下几种功能函数: 3D位移:CSS3中的3D位移主要包括trans ...
html css3d效果,html，css的3D变形
html,css的3D变形: 首先要了解一个概念:景深perspective 景深可以营造一个近大远小的效果,在IE.opera浏览器目前不支持这个属性,在safari和chrome里,要用-webk ...
CSS3动画（过渡、2D变形、3D变形）
1.过渡transition 1)说明: 作用在进行变化的元素上,有四个属性值:property(目标属性),duration(过渡时长), curve(运动曲线),delay(开始时间) 创建一个空 ...
3D变形：平移、旋转、缩放、父子关系外间距塌陷
3D变形:平移.旋转.缩放什么是3d转换定义元素在三维空间移动.缩放.旋转 3d坐标轴(图示) 3D立体空间的3根轴线 x轴:水平,向右为正,向左为负 y轴:垂直,向下为正,向上为负 z轴:垂直于 ...
3D变形：平移、旋转、缩放、立方体、盒子阴影
3D变形:平移.旋转.缩放什么是3d转换定义元素在三维空间移动.缩放.旋转 3d坐标轴(图示) 3D立体空间的3根轴线 x轴:水平,向右为正,向左为负 y轴:垂直,向下为正,向上为负 z轴:垂直于 ...
css+html 3D变形制作视频展示区
3D 转换 CSS3 允许您使用 3D 转换来对元素进行格式化. 在本章中,您将学到其中的一些 3D 转换方法: rotateX() rotateY() 转换属性: 下表列出了所有的转换属性: 属性 ...
CSS 3D变形动画属性之逆天立方体叠加动画
上一篇, juejin.im/post/5993d9- 把立方体的盒子搭出来之后,因为怕文章又臭又长(嗯,就是没有想好玩什么效果,偏不告诉你)关于动效没有做更多的处理,只做了一个绕Y轴旋转,这篇试着做 ...

最新文章

热门文章