-
css教程之transform-style [3D呈现]
- 2017-05-26 19:19 来源:未知
语法
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+ |
最新更新
C#教程之生成秘钥方式之一
C#教程之
C#教程之【Revit API】调用Revit内部命令Po
C#教程之创世纪
C#教程之创世纪
C#教程之秋葉隨風去 冰比冰比冰 C#实现多
C#教程之动软代码生成器基础使用
C#教程之C#开发微信小程序
C#教程之C# 利用反射将枚举绑定到下拉框
C#教程之.Net使用RabbitMQ
asp.net教程之纯ASP上传图像文件到数据库实
asp.net教程之ASP错误处理
asp.net教程之ASP网站防范黑客技巧
asp.net教程之用ASP取出HTML里面的图片地址
asp.net教程之ASP实现网页打开任何类型文件
asp.net教程之ASP木马Webshell安全解决办案
asp.net教程之几招让你的网站免受采集之苦
asp.net教程之ASP使用MYSQL数据库全攻略
asp.net教程之Ad Rotator 组件参考
asp.net教程之在Asp中使用存储过程数值类型
sql语句大全之SQL递归查询知多少
sql语句大全之SQL Server 2012 - 多表连接查询
sql语句大全之SQL Server 2012 - 开窗函数
sql语句大全之“RESOURCE MONITOR“CPU占用特别
sql语句大全之关系型数据库基本概念及
sql语句大全之T-SQL语句
sql语句大全之记一个常见的ms sql server中取
sql语句大全之游标 的使用
sql语句大全之sp_executesql 或者 EXECUTE 执行
sql语句大全之SQL Server 用角色(Role)管理数