CSS/CSS3

基础入门

高级进阶

参考手册

实战案例

CSS3 transform-style [3D呈现]

2017-08-15 21:38:43 来源: 点击:站内收藏

语法

transform-style: flat | preserve-3d
语法项目 说明
初始值 flat
适用于 块元素和行内元素
可否继承
媒介 视觉
版本 CSS3.0

说明

设置内嵌的元素在 3D 空间如何呈现。有两个值:flat:所有子元素在 2D 平面呈现。preserve-3d:保留3D空间。

取值

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

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

实例代码

CSS
.demo_box{
  background:none;width:700px;height:300px;border:none;
}
.perspective{
  position:relative;width:200px;height:200px;float:left;margin:20px;
  -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+
相关热词搜索:css3 transition
评论正在载入