CSS

CSS Code复制内容到剪贴板

1. .wrap {   

2.     width: 500px;   

3.     height: 300px;   

4.     margin: 30px auto;   

5.     position: relative;   

6.     background: url(images/bg-grid.jpg) no-repeat center center;   

7.     background-size: 100% 100%;   

8. }   

9. /*设置动画*/  

10. @keyframes spin{   

11.     0%{   

12.         transform:rotateY(0deg)   

13.     }   

14.     100%{   

15.         transform:rotateY(360deg)   

16.     }   

17. }   

18. .spin {   

19.     width: 142px;   

20.     height: 200px;   

21.     position: absolute;   

22.     top: 50%;   

23.     left: 50%;   

24.     margin-left: -72px;   

25.     margin-top: -101px;   

26.     border: 1px dashed orange;   

27.     cursor: pointer;   

28.     transform-style: preserve-3d;   

29. }   

30. /*调用动画*/  

31. .spin:hover{   

32.     animation:spin 5s linear infinite;   

33. }   

34. .rotate {   

35.     background: url(images/cardKingClub.png) no-repeat center;   

36.     background-size: 100% 100%;   

37.     border: 5px solid hsla(50,50%,50%,.9);   

38.     transform: perspective(200px) rotateY(45deg);   

39. }   

40. .rotate img{   

41.     border: 1px solid green;   

42.     transform: rotateX(15deg) translateZ(10px);   

43.     transform-origin: 0 0 40px;   

44. }   

45. /*改变transform-style的默认值*/  

46. .three-d {   

47.     transform-style: preserve-3d;   

48. }  

特别声明：为了节省篇幅，代码中CSS3属性代码省去了各浏览器的私有前缀，在实际操作中，需要将各浏览器前缀加上，才会有效果。

其效果如下所示：

正如您所看到的，当元素设置.rotate设置了flat值时，其子元素img不会根据translateZ()值摊开，而在同一平面旋转，如上图上部分所示；当元素.rotate设置了preserve-3d值时，其子元素img会根据translateZ()值摊开，不再会堆叠在一起，如上图下部分所示。

有一点需要特别提醒大家，如果你的元素设置了transform-style值为preserve-3d，就不能为了防止子元素溢出容器而设置overflow值为hidden，如果设置了overflow:hidden同样可以迫死子元素出现在同一平面（和元素设置了transform-style为flat一样的效果），如下图所示：

到此，关于“CSS3中设置3D变形的transform-style属性介绍”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注创新互联网站，小编会继续努力为大家带来更多实用的文章！