大理高端网站建设|网站托管|极速建站|WordPress主题设计开发

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

2014-01-26 4370次

CSS3带阴影3D旋转作品展示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.     width500px;   
  9.     margin20px;   
  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.     width500px;   
  42.     height281px;   
  43. }   
  44. /*自定义图片描边*/  
  45. .border-top, .border-left, .border-bottom, .border-right {   
  46.     background-color: rgba(0, 0, 0, 0.5);   
  47.     displayblock;   
  48.     positionabsolute;   
  49. }   
  50. .border-top,.border-bottom {   
  51.     height6px;   
  52.     width500px;   
  53. }   
  54. .border-top {   
  55.     top: 0;   
  56. }   
  57. .border-bottom {   
  58.     top275px;   
  59. }   
  60. .border-left,.border-right {   
  61.     height269px;   
  62.     width6px;   
  63.     top6px;   
  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.     padding60px 0;   
  76.     line-height40px;   
  77.     width500px;   
  78.     height161px;   
  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-size20px;   
  91.     margin-bottom8px;   
  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. }  

在线演示百度网盘下载(bewd)

3D图像旋转效果就介绍完成,不明白的可以给我留言,或下载演示文件,多看看就明白了。