? css亚博足球娱乐场注册--任意三数字加yabo.com直达官网之transform-style [3D呈现] 亚博足球娱乐场注册,亚博娱乐全天彩,亚博官网赢钱不给
VB.net 2010 视频亚博足球娱乐场注册--任意三数字加yabo.com直达官网 VB.net 2010 视频亚博足球娱乐场注册--任意三数字加yabo.com直达官网 VB.net 2010 视频亚博足球娱乐场注册--任意三数字加yabo.com直达官网
SQL Server 2008 视频亚博足球娱乐场注册--任意三数字加yabo.com直达官网 c#入门经典亚博足球娱乐场注册--任意三数字加yabo.com直达官网 Visual Basic从门到精通视频亚博足球娱乐场注册--任意三数字加yabo.com直达官网
当前位置:
首页 > 网站开发 > HTML >
  • css亚博足球娱乐场注册--任意三数字加yabo.com直达官网之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

					
  1. .demo_box{
  2. ????background:none;width:700px;height:300px;border:none;
  3. }
  4. .perspective{
  5. ????position:relative;width:200px;height:200px;float:left;margin:20px;
  6. ????-webkit-transform:perspective(300px);
  7. ????-moz-transform:perspective(300px);
  8. }
  9. .m3d{
  10. ????-moz-transform-style:preserve-3d;
  11. ????-webkit-transform-style:preserve-3d;
  12. }
  13. .perspective?span{
  14. ????display:block;position:absolute;width:198px;height:198px;font-size:120px;line-height:198px;text-align:center;
  15. ????background:rgba(0,0,0,0.2);border:1px?solid?#333;
  16. ????
  17. }
  18. .front{
  19. ????-webkit-transform:rotateY(0deg)?translateZ(100px);
  20. ????-moz-transform:rotateY(0deg)?translateZ(100px);
  21. }
  22. .back{
  23. ????-webkit-transform:rotateY(180deg)?translateZ(100px);
  24. ????-moz-transform:rotateY(180deg)?translateZ(100px);
  25. }
  26. .right{
  27. ????-webkit-transform:rotateY(90deg)?translateZ(100px);
  28. ????-moz-transform:rotateY(90deg)?translateZ(100px);
  29. }
  30. .left{
  31. ????-webkit-transform:rotateY(-90deg)?translateZ(100px);
  32. ????-moz-transform:rotateY(-90deg)?translateZ(100px);
  33. }
  34. .top{
  35. ????-webkit-transform:rotateX(90deg)?translateZ(100px);
  36. ????-moz-transform:rotateX(90deg)?translateZ(100px);
  37. }
  38. .bottom{
  39. ????-webkit-transform:rotateX(-90deg)?translateZ(100px);
  40. ????-moz-transform:rotateX(-90deg)?translateZ(100px);
  41. }
复制
HTML

					
  1. <>?class="demo_box">
  2. ????<>?class="perspective">
  3. ????????<>?class="front">1
  4. ????????<>?class="back">2
  5. ????????<>?class="right">3
  6. ????????<>?class="left">4
  7. ????????<>?class="top">5
  8. ????????<>?class="bottom">6
  9. ????
  • ????<>?class="perspective?m3d">
  • ????????<>?class="front">1
  • ????????<>?class="back">2
  • ????????<>?class="right">3
  • ????????<>?class="left">4
  • ????????<>?class="top">5
  • ????????<>?class="bottom">6
  • ????
  • 复制
    运行一下 ?

    兼容性

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

    相关亚博足球娱乐场注册--任意三数字加yabo.com直达官网
    关于我们--广告服务--免责声明--本站帮助-友情链接--版权声明--联系我们 ?? ?? 黑ICP备07002182号