“Css3 pr transform style”的版本间差异
本页内容
(创建页面,内容为“{{DISPLAYTITLE:transform-style}}3 = CSS3 transform-style 属性 = 让转换的子元素保留3D转换: <sample title="" desc="" lang="html" hererun="1"> div { transform: rotateY(60deg); transform-style: preserve-3d; -webkit-transform: rotateY(60deg); →Safari and Chrome: -webkit-transform-style: preserve-3d; →Safari and Chrome: } </sample> <run name=""> <!DOCTYPE html> <html> <head> <meta charset="utf-8…”) |
无编辑摘要 |
||
(未显示同一用户的1个中间版本) | |||
第1行: | 第1行: | ||
{{DISPLAYTITLE:transform-style}}[[Category: | {{DISPLAYTITLE:transform-style}}[[Category:css reference|204]] | ||
= CSS3 transform-style 属性 = | = CSS3 transform-style 属性 = | ||
第72行: | 第72行: | ||
{| class="table table-striped table-hover" | {| class="table table-striped table-hover" | ||
! 属性 | ! 属性 | ||
! | ! Chrome | ||
! | ! Internet Explorer / Edge | ||
! | ! Firefox | ||
! | ! Safari | ||
! | ! Opera | ||
|- | |- | ||
| transform-style | | transform-style |
2022年8月19日 (五) 04:48的最新版本
CSS3 transform-style 属性
让转换的子元素保留3D转换:
示例
div
{
transform: rotateY(60deg);
transform-style: preserve-3d;
-webkit-transform: rotateY(60deg); /* Safari and Chrome */
-webkit-transform-style: preserve-3d; /* Safari and Chrome */
}
浏览器支持
表格中的数字表示支持该属性的第一个浏览器版本号。
紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。
属性 | Chrome | Internet Explorer / Edge | Firefox | Safari | Opera |
---|---|---|---|---|---|
transform-style | 36.012.0 -webkit- | 11.0 | 16.010.0 -moz- | 9.04.0 -webkit- | 23.015.0 -webkit- |
属性定义及使用说明
transform--style属性指定嵌套元素是怎样在三维空间中呈现。
注意: 使用此属性必须先使用 transform 属性.
Safari/Chrome用户:为了更好地理解transform--style属性,请查看实例 演示.
默认值: | flat |
继承: | no |
版本: | CSS3 |
JavaScript 语法: | object.style.transformStyle="preserve-3d" |
语法
transform-style: flat|preserve-3d;
值 | 描述 |
---|---|
flat | 表示所有子元素在2D平面呈现。 |
preserve-3d | 表示所有子元素在3D空间中呈现。 |