CSS3 transform-style 属性

语法

transform-style: flat | preserve-3d

语法项目 说明

初始值 flat

适用于块元素和行内元素

可否继承否

媒介视觉

版本 CSS3.0

说明

设置内嵌的元素在 3D 空间如何呈现。有两个值：

flat：所有子元素在 2D 平面呈现。

preserve-3d：保留3D空间。

取值

flat：所有子元素在 2D 平面呈现。

preserve-3d：保留3D空间。

实例

css：

.demo_box{background:none;height:300px;border:none;
}
.perspective{position:relative;width:200px;height:200px;float:left;margin:100px;-webkit-transform:perspective(300px);-moz-transform:perspective(300px);
}
.m3d{-moz-transform-style:preserve-3d;-webkit-transform-style:preserve-3d;
}
.perspective span{display:block;position:absolute;width:198px;height:198px;font-size:120px;line-height:198px;text-align:center;background:rgba(0,0,0,0.2);border:1px solid #333;}
.front{-webkit-transform:rotateY(0deg) translateZ(100px);-moz-transform:rotateY(0deg) translateZ(100px);
}
.back{-webkit-transform:rotateY(180deg) translateZ(100px);-moz-transform:rotateY(180deg) translateZ(100px);
}
.right{-webkit-transform:rotateY(90deg) translateZ(100px);-moz-transform:rotateY(90deg) translateZ(100px);
}
.left{-webkit-transform:rotateY(-90deg) translateZ(100px);-moz-transform:rotateY(-90deg) translateZ(100px);
}
.top{-webkit-transform:rotateX(90deg) translateZ(100px);-moz-transform:rotateX(90deg) translateZ(100px);
}
.bottom{-webkit-transform:rotateX(-90deg) translateZ(100px);-moz-transform:rotateX(-90deg) translateZ(100px);
}

html：

<div class="demo_box"><div class="perspective"><span class="front">1</span><span class="back">2</span><span class="right">3</span><span class="left">4</span><span class="top">5</span><span class="bottom">6</span></div><div class="perspective m3d"><span class="front">1</span><span class="back">2</span><span class="right">3</span><span class="left">4</span><span class="top">5</span><span class="bottom">6</span></div>
</div>

效果

兼容性

IE Firefox Opera Safari Chrome

IE 10+ Firefox 3.5+ Opera 11.50+ Safari 10+ Chrome 2.0+

摘自：http://blog.sina.com.cn/s/blog_65c2ec5e0101fm8u.html

转载于:https://www.cnblogs.com/hjbky/p/7452923.html

CSS3 transform-style 属性相关推荐

CSS3 transform变形属性、2D变形、3D变形
第十五章:transform变形属性一.2D变形 1. rotate()旋转属性值 2. translate()位移属性值 3. scale()缩放属性值 4. skew()倾斜属性值 5. tra ...
CSS3 Transform、Transition和Animation属性总结
CSS3的三个与变形和动画啊相关的属性: Transform 浏览器支持情况: Internet Explorer 10.Firefox.Opera 支持 transform 属性. Internet ...
css让div旋转,CSS3 transform 属性旋转 div 元素
div { transform:rotate(7deg); -ms-transform:rotate(7deg); /* IE 9 */ -moz-transform:rotate(7deg); /* ...
利用CSS3 transform属性制作漂亮的照片墙特效
CSS3 transform制作漂亮的照片墙特效 >>查看演示 >>下载地址转载于:https://www.cnblogs.com/delmarks/p/css3-zhao- ...
CSS3 Transform变形理解与应用
CSS3 Transform变形理解与应用 Transform:对元素进行变形: Transition:对元素某个属性或多个属性的变化,进行控制(时间等),类似flash的补间动画.但只有两个关键贞. ...
html图片旋转3种方式—— CSS3 transform
html图片旋转有3中方式:ie 滤镜,CSS3 transform,HTML5 canvas rotate 参考文章:网页中图片旋转的几种实现方式 CSS3 transform css3 的tra ...
巧用 CSS3 filter(滤镜) 属性
原文链接:CSS3 filter(滤镜) 属性效果预览 filter: grayscale(100%); 定义和使用 filter 属性定义了元素(通常是<img>)的可视效果(例如:模 ...
CSS盒子模型之CSS3可伸缩框属性（Flexible Box）
CSS盒子模型(下) 一．CSS3可伸缩框(Flexible Box) 可伸缩框属性(Flexible Box)是css3新添加的盒子模型属性,有人称之为弹性盒模型,它的出现打破了我们经常使用的浮动布 ...
CSS3 transform
transform的属性包括:rotate() / skew() / scale() / translate(,) ,分别还有x.y之分,比如:rotatex() 和 rotatey() ,以此类推. ...
理解CSS3 transform中的Matrix(矩阵)
一.哥,我被你吓住了打架的时候会被块头大的吓住,学习的时候会被奇怪名字吓住(如"拉普拉斯不等式").这与情感化设计本质一致:界面设计好会让人觉得这个软件好用! 所以,当看到上面& ...

CSS3 transform-style 属性

CSS3 transform-style 属性相关推荐

最新文章

热门文章