[![CSS3带阴影3D旋转作品展示](https://pic.salongweb.com/2014/01/3dimages.jpg)](https://pic.salongweb.com/2014/01/3dimages.jpg "CSS3带阴影3D旋转作品展示")CSS3有太多实用、创新的网页交互效果，而今天跟大家介绍一个让人激动的3D图像旋转效果，使网页更加的生动、漂亮。

国外在HTML5/CSS3的技术上远比国内先进，大量的网站很早都已经使用最新的技术，国内使用HTML5/CSS3编写的网站数量也在增加，但由于兼容性的问题，让很多网站开发人员望而却步,新的技术普及的范围不大。而让人激动的3D效果更是少之又少，所以我们应该放弃对太老的、过时的浏览器兼容性的工作，这种做法也是鼓励用户安装最新版本的、高性能的浏览器，更好的体验HTML5/CSS3的优秀的特性。

随着浏览器的更新与性能的提升，不只CSS3的3D效果，相信更多的[HTML5/CSS3](https://yfdxs.com/salong-theme.html "HTML5/CSS3响应式Salong主题")的最新技术会融入到越来越多的网页中。

今天我们介绍的3D图像旋转效果，使用纯CSS3就可以实现，不需要js。用到新的CSS3样式都在代码中有注释，一起来看看：

1、HTML代码：

1. <!– 3D旋转图像 –>
2. <article class=“portfolio left”>
3. <div class=“porthumb”>
4. <!– 默认显示的图片 –>
5. <img src=“images/3d\_001.jpg” alt=“萨龙网络” />
6. <!– 默认显示的图片end –>
7. <!– 下面的四个空div是图片的描边效果 –>
8. <div class=“border-left”></div>
9. <div class=“border-top”></div>
10. <div class=“border-bottom”></div>
11. <div class=“border-right”></div>
12. <!– 下面的四个空div是图片的描边效果end –>
13. <!– 3D旋转后显示的内容 –>
14. <div class=“porcon”> <a href=“https://api.salongweb.com/css3-3d-rotate.html” title=“详细阅读 萨龙网络” target=“\_blank” class=“portfolio-title”> 萨龙网络 </a> <a href=“https://api.salongweb.com/css3-3d-rotate.html” rel=“bookmark” target=“\_blank” title=“详细阅读 萨龙网络”>
15. <p>完成时间：2014年1月18日<br />
16. 企业类型：网站建设</p>
17. </a> </div>
18. <!– 3D旋转后显示的内容end –>
19. </div>
20. </article>
21. <!– 3D旋转图像end –>

2、CSS3代码

1. /\*定义3D元素距视图的距离\*/
2. .portfolio{
3. -webkit-perspective: 1200px;
4. -moz-perspective: 1200px;
5. -ms-perspective: 1200px;
6. perspective: 1200px;
7. /\*perspective属性定义3D元素距视图的距离，只影响3D转换元素，而且本身不会受影响，其子元素会获得透视效果\*/
8. width: 500px;
9. margin: 20px;
10. }
11. 
12. /\*缩略图\*/
13. .porthumb {
14. position:relative;
15. -webkit-transform-style: preserve-3d;
16. -moz-transform-style: preserve-3d;
17. -ms-transform-style: preserve-3d;
18. transform-style: preserve-3d;
19. /\*transform-style 属性规定如何在 3D 空间中呈现被嵌套的元素，被转换的子元素保留其3D转换\*/
20. -webkit-transition: 1s ease;
21. -moz-transition: 1s ease;
22. -ms-transition: 1s ease;
23. -o-transition: 1s ease;
24. transition: 1s ease;
25. /\*3D转换的时间为1秒\*/;
26. }
27. .porthumb:after {
28. content:’ ‘;
29. display:block;
30. height:3vw;
31. /\* vw是移动设计备窗体单位\*/
32. -webkit-transform: rotateX(90deg);
33. -moz-transform: rotateX(90deg);
34. -ms-transform: rotateX(90deg);
35. -o-transform: rotateX(90deg);
36. transform: rotateX(90deg);
37. background-image: radial-gradient(ellipse closest-side, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 100%);
38. /\* radial-gradient 是径向渐变 \*/;
39. }
40. .porthumb img{
41. width: 500px;
42. height: 281px;
43. }
44. /\*自定义图片描边\*/
45. .border-top, .border-left, .border-bottom, .border-right {
46. background-color: rgba(0, 0, 0, 0.5);
47. display: block;
48. position: absolute;
49. }
50. .border-top,.border-bottom {
51. height: 6px;
52. width: 500px;
53. }
54. .border-top {
55. top: 0;
56. }
57. .border-bottom {
58. top: 275px;
59. }
60. .border-left,.border-right {
61. height: 269px;
62. width: 6px;
63. top: 6px;
64. }
65. .border-left {
66. left: 0;
67. }
68. .border-right {
69. rightright: 0;
70. }
71. /\*内容\*/
72. .porcon {
73. position:absolute;
74. top:0;
75. padding: 60px 0;
76. line-height: 40px;
77. width: 500px;
78. height: 161px;
79. text-align:center;
80. opacity:.01;
81. background:rgba(0,0,0,.4);
82. -webkit-transform: rotateY(180deg) translateZ(1px);
83. -moz-transform: rotateY(180deg) translateZ(1px);
84. -ms-transform: rotateY(180deg) translateZ(1px);
85. -o-transform: rotateY(180deg) translateZ(1px);
86. transform: rotateY(180deg) translateZ(1px);
87. /\*沿着Y轴的3D旋转， 3D转换只用Z轴的值，将此元素反转180度，置于Z轴的背面。\*/;
88. }
89. .portfolio-title{
90. font-size: 20px;
91. margin-bottom: 8px;
92. font-family: 微软雅黑;
93. }
94. .porcon a{
95. color: \#fff;
96. }
97. .porcon a:hover{
98. color: \#fab210;
99. }
100. /\*鼠标触发元素旋转与显示\*/
101. .portfolio:hover .porthumb{
102. -webkit-transform: rotateY(180deg);
103. -moz-transform: rotateY(180deg);
104. -ms-transform: rotateY(180deg);
105. -o-transform: rotateY(180deg);
106. transform: rotateY(180deg);
107. /\*鼠标经过时，.porthumb元素沿着Y轴3D旋转180度，同时.porcon元素反转180度，透明度为1，所以把 默认显示的图像覆盖\*/;
108. }
109. .portfolio:hover .porcon{
110. opacity:1;
111. }

\[scbutton link=”https://demo.salongweb.com/CSS3-3D/index.html” target=”blank” variation=”yellow”\]在线演示\[/scbutton\]\[scbutton link=”http://pan.baidu.com/s/1hqDTkJq” target=”blank” variation=”blue”\]百度网盘下载（bewd）\[/scbutton\]\[successbox\]3D图像旋转效果就介绍完成，不明白的可以给我留言，或下载演示文件，多看看就明白了。\[/successbox\]