当前位置：首页-WordPress文章-HTML5/CSS3-正文

CSS3带阴影的3D旋转作品展示

萨龙龙 萨龙龙 HTML5/CSS310年前301.37W

CSS3带阴影的3D旋转作品展示 - 第1张CSS3有太多实用、创新的网页交互效果，而今天跟大家介绍一个让人激动的3D图像旋转效果，使网页更加的生动、漂亮。

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

随着浏览器的更新与性能的提升，不只CSS3的3D效果，相信更多的HTML5/CSS3的最新技术会融入到越来越多的网页中。

今天我们介绍的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://salongweb.com/css3-3d-rotate.html" title="详细阅读 萨龙网络" target="_blank" class="portfolio-title"> 萨龙网络 </a> <a href="https://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]

HTML5/CSS3(3)
本文原创，作者：萨龙龙，其版权均为萨龙网络所有。
如需转载，请注明出处：https://salongweb.com/css3-3d-rotate.html
萨龙龙

萨龙龙

侠客

一个平平常常的人，热爱生活、旅行和摄影，骑行去过西藏，一直计划再去。14年从江西骑行来到大理，现栖居于洱海边，食人间烟火，过简单生活，做简约设计！

1331.69M123.17W￥1.99W

相关文章

自定义联系表单，并使用HTML5/CSS3客户端验证

作为一个企业站点，客户可以通过电话、QQ等通讯方式很方便的联系到企业，但联系表单是一个必要的功能。 萨龙网络建站一般都使用wordpress作为开发平台，或者直接静态页面来展示企业网站。使用wordpress作…
HTML5/CSS310年前01.95W2

Emmet快速编写CSS样式

Emmet缩写可以快速地生成HTML代码的结构化标签，在我们编写HTML代码时节省了很多时间，提高了工作效率，让前端开发人员也不会感觉太繁琐，今天我们来介绍下Emmet如何快速编写CSS样式。 [related_p…
HTML5/CSS310年前01.44W2

CSS3 模拟弹窗效果

这篇文章我们来创建一个很酷的CSS3模拟弹窗效果，也许你看到过很多类似的弹窗效果，但都是通过jQuery来实现。 通过CSS3模拟弹窗效果只需简单的两段CSS样式就可以实现，而且实现的效果不比jQuery差，甚…
HTML5/CSS310年前01.39W0

Emmet的高级功能与使用技巧

[infobox]前端开发工具Emmet的介绍，Emmet快速编写HTML代码和Emmet快速编写CSS样式分别介绍了Emmet的用途，编写HTML代码和CSS样式，今天再来介绍下Emmet的一些高级功能和使用技巧。…
HTML5/CSS310年前02.15W2

Wordpress自定义域与HTML5简洁的音乐播放器

Sixianqiu主题，一个简洁、多形式（标准、图像、相册、音乐、视频、引用与链接），专门为四弦秋发表诗集的Wordpress博客主题。对于音乐和视频本来是打算用网易云音乐和优酷视频，而萨龙龙的所有站点都使用http…
HTML5/CSS38年前01.13W0

使用CSS3 @font-face打造个性化web字体

个性化的web字体，如萨龙网络的标题、页脚小工具标题、宣传语等都用的是个性化的web字体，在CSS3之前，web设计师们都只能使用电脑中安装好的字体，或者把字体做成图片。自从有了CSS3强大的@font-face功能…
HTML5/CSS310年前01.97W5