VB.net 2010 视频教程 VB.net 2010 视频教程 VB.net 2010 视频教程
当前位置:
首页 > 网站开发 > HTML >

  • 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 

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

					

						复制

				

				

					HTML
					

					
    
						
  1. 
							<div class="demo_box">
    2. 
						
  2. 
							    <div class="perspective">
    3. 
						
  3. 
							        <span class="front">1</span>
    4. 
						
  4. 
							        <span class="back">2</span>
    5. 
						
  5. 
							        <span class="right">3</span>
    6. 
						
  6. 
							        <span class="left">4</span>
    7. 
						
  7. 
							        <span class="top">5</span>
    8. 
						
  8. 
							        <span class="bottom">6</span>
    9. 
						
  9. 
							    </div>
    10. 
						
  10. 
							    <div class="perspective m3d">
    11. 
						
  11. 
							        <span class="front">1</span>
    12. 
						
  12. 
							        <span class="back">2</span>
    13. 
						
  13. 
							        <span class="right">3</span>
    14. 
						
  14. 
							        <span class="left">4</span>
    15. 
						
  15. 
							        <span class="top">5</span>
    16. 
						
  16. 
							        <span class="bottom">6</span>
    17. 
						
  17. 
							    </div>
    18. 
						
  18. 
							</div>
    19. 
					

					

						复制

				

				运行一下 »

		

	

	

		

			

				兼容性

			

				

					
						

							
								IE
							
								Firefox
							
								Opera
							
								Safari
							
								Chrome
						

					
					
						

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

					
				

			

		

	






      



  

  
  

   
    
    
   

  

  
 
 

 
 
  
 
 
 
 






 





相关教程







关于我们--广告服务--免责声明--本站帮助-友情链接--版权声明--联系我们

  
  


黑ICP备07002182号