下面介绍下CSS的2D/3D转换属性
【兼容】
IE9+及其他主流浏览器,Opera 只支持 2D 转换
由于目前几乎所有的浏览器对这个属性的渲染效率都很低,所以我们可以用下面的hack去提高渲染效率,
兼容hack写法:
-ms-transform/* IE 9 */
-moz-transform/* Firefox */
-webkit-transform/* Safari 和 Chrome */
-o-transform/* Opera */
【目录】
1. transform(变换)向元素应用 2D 或 3D 转换,该属性允许对元素进行位移、旋转、缩放或倾斜;
2. transform-origin(变换原点)允许改变被转换元素的位置;
3.transform-style(变换风格)规定子元素是否保留3D位置;
4.perspective(透视)规定 3D 元素的透视效果;
5.perspective-origin(透视来源)规定 3D 元素的底部位置;
6.backface-visibility(背面能见度)定义元素在不面对屏幕时是否可见;
【详解】
(1)transform(变换)向元素应用 2D 或 3D 转换
主要为①translate位移;②scale比例(缩放);③rotate旋转;④skew倾斜;⑤matrix矩阵;
依次介绍:
①translate位移;
translate(x,y) 定义2D转换(位移)
translate3d(x,y,z) 定义 3D 转换
translateX(x) 定义转换,只是用 X 轴的值(位移)
translateY(y) 定义转换,只是用 Y 轴的值(位移)
translateZ(z) 定义 3D 转换,只是用 Z 轴的值
②scale比例(缩放)
scale(x,y) 定义 2D 缩放转换
scale3d(x,y,z) 定义 3D 缩放转换
scaleX(x) 通过设置 X 轴的值来定义缩放转换
scaleY(y) 通过设置 Y 轴的值来定义缩放转换
scaleZ(z) 通过设置 Z 轴的值来定义 3D 缩放转换
③rotate旋转
rotate(angle) 定义 2D 旋转,在参数中规定角度
rotate3d(x,y,z,angle) 定义 3D 旋转
rotateX(angle) 定义沿着 X 轴的 3D 旋转
rotateY(angle) 定义沿着 Y 轴的 3D 旋转
rotateZ(angle) 定义沿着 Z 轴的 3D 旋转
④skew倾斜
skew(x-angle,y-angle) 定义沿着 X 和 Y 轴的 2D 倾斜转换
skewX(angle) 定义沿着 X 轴的 2D 倾斜转换
skewY(angle) 定义沿着 Y 轴的 2D 倾斜转换
⑤matrix矩阵
matrix(n,n,n,n,n,n) 定义 2D 转换,使用六个值的矩阵matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) 定义 3D 转换,使用 16 个值的 4x4 矩阵
(2) transform-origin(变换原点)设置变换的原点,允许改变被转换元素的位置;
语法:
transform-origin: x-axis y-axis z-axis;
x-axis:定义视图被置于X轴的何处; y-axis :置于Y轴何处;z-axis:置于Z轴何处;
<style type="text/css"> #div1{ position: relative; height: 200px; width: 200px; margin: 100px; padding:10px; border: 1px solid black; } #div2{ padding:50px; position: absolute; border: 1px solid black; background-color: yellow; transform: rotate(45deg); transform-origin:20% 40%; -ms-transform: rotate(45deg); /* IE 9 */ -ms-transform-origin:20% 40%; /* IE 9 */ -webkit-transform: rotate(45deg); /* Safari and Chrome */ -webkit-transform-origin:20% 40%; /* Safari and Chrome */ -moz-transform: rotate(45deg); /* Firefox */ -moz-transform-origin:20% 40%; /* Firefox */ -o-transform: rotate(45deg); /* Opera */ -o-transform-origin:20% 40%; /* Opera */ } </style> <div id="div1"> <div id="div2">HELLO</div> </div>
(3)transform-style(变换风格)规定子元素是否保留3D位置
【兼容】IE不支持,Firefox 支持该属性,Chrome、Safari 和 Opera 支持hack写法-webkit-transform-style
属性值:flat(平面);preserve-3d(保留3D)
flat(平面) 子元素将不保留其 3D 位置
preserve-3d(保留3D) 子元素将保留其 3D 位置
<style type="text/css"> #div1{ position: relative; height: 200px; width: 200px; margin: 100px; padding:10px; border: 1px solid black; } #div2{ padding:50px; position: absolute; border: 1px solid black; background-color: red; transform: rotateY(60deg); transform-style: preserve-3d; -webkit-transform: rotateY(60deg); /* Safari and Chrome */ -webkit-transform-style: preserve-3d; /* Safari and Chrome */ } #div3{ padding:40px; position: absolute; border: 1px solid black; background-color: yellow; transform: rotateY(80deg); -webkit-transform: rotateY(-60deg); /* Safari and Chrome */ } </style> <div id="div1"> <div id="div2">HELLO <div id="div3">YELLOW</div> </div> </div>
分析:这里我对div2元素设置-webkit-transform-style: preserve-3d属性,那么其子元素div3就保留了3D位置,显示为3D;若改为flat,则div3会显示为平面,失去3D位置
(4)perspective(透视)规定 3D 元素的透视效果,通俗理解就是定义3D元素距视图的距离,以像素计
作用:近大远小,近宽远窄---使渲染更加逼真,且具有层次
兼容:Chrome 和 Safari 支持hack写法的 -webkit-perspective 透视属性
默认值为none,与0相同,即不设置透视
<style type="text/css"> #div1{ position: relative; height: 150px; width: 150px; margin: 50px; padding:10px; border: 1px solid black; perspective:150; -webkit-perspective:150; /* Safari and Chrome */ } #div2{ padding:50px; position: absolute; border: 1px solid black; background-color: yellow; transform: rotateX(45deg); -webkit-transform: rotateX(45deg); /* Safari and Chrome */ } </style> <div id="div1"> <div id="div2">HELLO</div> </div>
(5)perspective-origin(透视来源)规定 3D 元素的底部位置
perspective-origin 属性定义 3D 元素所基于的 X 轴和 Y 轴,该属性允许改变 3D 元素的底部位置
当为元素定义 perspective-origin 属性时,其子元素会获得透视效果,而不是元素本身
【注释】:该属性必须与 perspective 属性一同使用,而且只影响 3D 转换元素
语法:
perspective-origin: x-axis y-axis;
(6)backface-visibility(背面能见度)定义元素在不面对屏幕时是否可见,如果在旋转元素不希望看到其背面时,该属性很有用
【兼容】IE10+ 和 Firefox 支持 backface-visibility 属性;Opera 15+、Safari 和 Chrome 支持hack写法的 -webkit-backface-visibility 属性
属性值:visible(可见)背面可见;hidden(隐藏)背面不可见
下面举个简单例子:
本例有两个 div 元素,均旋转 180 度,背向用户。第一个div元素的 backface-visibility 属性设置为hidden,所以应该是不可见的
<style type="text/css"> div{ position:relative; height:60px; width:60px; border:1px solid #000; background-color:yellow; transform:rotateY(180deg); -webkit-transform:rotateY(180deg); /* Chrome and Safari */ -moz-transform:rotateY(180deg); /* Firefox */ } #div1{ -webkit-backface-visibility:hidden; -moz-backface-visibility:hidden; -ms-backface-visibility:hidden; } #div2{ -webkit-backface-visibility:visible; -moz-backface-visibility:visible; -ms-backface-visibility:visible; } </style> <div id="div1">DIV 1</div> <div id="div2">DIV 2</div>
最后分享个实践例子:
<style type="text/css"> .div1{ position: relative; height: 150px; width: 150px; margin: 0px; padding:2px; border: 1px solid black; perspective:550; -webkit-perspective:550; perspective-origin: 50% 100px; -webkit-perspecitve-origin: 50% 100px; } .div2{ position: absolute; border: 1px solid black; background-color: yellow; transform: rotateX(0deg); -webkit-transform: rotateX(0deg); -webkit-animation: rotateXing 1.8s infinite linear; animation: rotateXing 1.8s infinite linear; width:148px; height:148px; text-align:center; line-height:148px; } .div3{ position: absolute; border: 1px solid black; background-color: green; transform: rotateY(0deg); -webkit-transform: rotateY(0deg); -webkit-animation: rotateYing 2.8s infinite linear; animation: rotateYing 2.8s infinite linear; width:148px; height:148px; text-align:center; line-height:148px; } @-webkit-keyframes rotateXing { from { transform: rotateX(1deg); -webkit-transform: rotateX(1deg); } to { transform: rotateX(359deg); -webkit-transform: rotateX(359deg); } } @keyframes rotateXing { from { transform: rotateX(1deg); -webkit-transform: rotateX(1deg); } to { transform: rotateX(359deg); -webkit-transform: rotateX(359deg); } } @-webkit-keyframes rotateYing { from { transform: rotateY(1deg); -webkit-transform: rotateY(1deg); } to { transform: rotateY(359deg); -webkit-transform: rotateY(359deg); } } @keyframes rotateYing { from { transform: rotateY(1deg); -webkit-transform: rotateY(1deg); } to { transform: rotateY(359deg); -webkit-transform: rotateY(359deg); } } </style> <div class="div1"> <div class="div2"></div> <div class="div3"></div> </div>
【拓展】
.
相关推荐
在本文介绍的应用场景中,DIBR 不仅有助于实现 2D 到 3D 的转换,还能支持 3D 内容的灵活调整与操控,从而使得整个服务更加个性化和高效。 ##### 3. 基于 XML 的元数据作用 基于 XML 的元数据是用于描述和控制 3D ...
### Ansoft Maxwell 2D/3D 使用说明详解 #### 第1章 Ansoft 主界面控制面板简介 在安装好 Ansoft 软件的电磁场计算模块 Maxwell 后,可以通过 Windows 的“开始”菜单找到“程序”项中的“Ansoft”>“Maxwell ...
OpenGL中的3D坐标到2D坐标的转换是计算机图形学中的一个核心概念,它涉及将三维空间中的点投影到二维屏幕上的过程。这一过程对于渲染三维场景至二维显示设备至关重要。在OpenGL中,该转换主要通过图形管线完成,它将...
- **2D/3D转换属性(Transform)**:允许元素进行旋转、缩放等。 - **用户界面属性(User-interface)**:涉及一些用户界面的视觉反馈。 - **CSS3选择器**:用于选择和操作元素的高级规则。 在CSS3中,还引入了一些...
1、transition(过度属性)2、animation(动画属性)3、transform(2D/3D转换属性) 下面逐一进行介绍我的理解: 1、transition:<过渡属性名称> <过渡时间> <过渡模式> 如-webkit-transition:color 1s; 等同于: -...
例如,你可能需要从2D的饼图系列开始,然后改变`Series.View3D.IsRightAngleAxes`属性为`false`,设置`Series.View3D.Perspective`来调整透视角度,最后可能还需要调整其他3D相关的属性以达到理想的视觉效果。...
2D到3D转换:在某些情况下,可能需要将2D图像转化为3D模型。这涉及图像分析、形状识别和深度估计等技术,例如使用深度学习算法进行自动3D重建。 三、过渡画廊特效 过渡效果是在不同元素或场景之间创建平滑视觉变化...
6. **Rendering Pipeline**:负责将3D场景转换为2D图像,包括投影、消隐和纹理映射等步骤。 **应用场景** Java 2D和3D API广泛应用于各种领域: 1. **游戏开发**:构建具有交互性和视觉吸引力的2D和3D游戏。 2. **...
与2D转换相比,3D转换提供了更丰富的视觉表现力,让网页设计更加生动有趣。 2D转换主要涉及X轴和Y轴,包括平移、旋转、缩放和倾斜等操作,所有这些变换都在同一平面内进行。而3D转换则引入了Z轴,使元素能够在三维...
本资源"2D文字与3D图像粒子转换动画特效.rar"提供了一种独特的技术,结合了2D文字与3D图像粒子的转换,为网页增添动态美感。这个特效不仅能够吸引用户注意力,还能在一定程度上提升网站或应用的交互性。 首先,我们...
CSS3 中引入了许多新的特性,如选择器伪类和伪元素、背景边框、文本效果、渐变、2D/3D 转换等。 选择器伪类和伪元素 CSS3 中引入了选择器伪类和伪元素,伪类用于向某些选择器添加特殊的效果,而伪元素创建了 HTML ...
2D/3D 转换:CSS3 支持对元素进行 2D 和 3D 转换,包括旋转、缩放和倾斜等效果。这可以帮助开发者创建更复杂的动画和交互效果。 动画和过渡:CSS3 提供了两种新的动画和过渡效果,即 @keyframes 和 transition。这些...
3D点云是由激光雷达、RGB-D相机等设备生成的,它由大量的3D坐标点组成,每个点代表空间中的一个位置,包含X、Y、Z坐标信息,有时还包含颜色或反射强度等属性。3D点云可以提供环境的三维结构信息,广泛应用于机器人...
在Unity引擎中,将2D元素转换为3D对象是一项常见的操作,特别是在创建交互式用户界面(UI)或实现从2D游戏过渡到3D场景时。本教程将深入探讨如何在Unity中从UI上拖出3D物体,以及相关的技术细节。 首先,让我们了解...
视口定义了设备坐标与屏幕坐标之间的转换,而投影则决定了如何将3D空间的物体映射到2D屏幕上。在2D应用中,通常使用 Orthographic Projection(正交投影),它不会产生透视变形,适合于2D场景。 最后,我们需要提交...
2. **CSS3 3D Transform**: CSS3的3D转换提供了一系列属性,如`transform-style`, `perspective`, `rotateX`, `rotateY`, `rotateZ`, `translate3d`等,允许我们对HTML元素进行3D空间的旋转、缩放和平移。...
Assimp库支持多种3D模型格式,能处理模型的导入、优化和转换,使得它们可以在Cocos2d-x环境中使用。 3. **场景和节点**: - 在Cocos2d-x中,3D对象被表示为`cc::Node`的子类,如`cc::Sprite3D`或`cc::Mesh`。每个...
接下来,我们要用到CSS3的3D转换属性。这些属性包括`transform`, `perspective`, `rotateX`, `rotateY`, `rotateZ`等。例如,我们可以为按钮添加一个点击后的3D翻转效果: ```css #myButton { perspective: 1000px...