首页 > 代码库 > CSS3特效----制作3D旋转照片展示区
CSS3特效----制作3D旋转照片展示区
任务一、制作多背景
提示：上层有一个径向渐变，渐变图像farthest-side ellipse at center, rgba(246,241,232,.85) 39%,rgba(212,204,186,.5) 100%)，底层使用背景图片。
任务二、控制背景图像尺寸
提示：使用background-size，让两层背景都是全屏显示
任务三、给每个列表项添加过渡动画效果
提示：使用transition属性，给每个列表项.item设置变形过渡效果。transition: -webkit-transform .6s;
任务四、悬浮状态改变每个列表项的transform效果
提示：通过transform属性，在列表悬浮状态设置 3D旋转效果：translateZ(-50px) rotateX(95deg);
任务五、设置列表项图片的圆角和阴影效果
提示：通过border-radius和box-shadow给图像设置圆角和阴影效果。
任务六、给底层显示文本的层级设置渐变效果
提示：使用CSS3渐变属性设置选项卡文本层的背景效果
任务七、列表项悬浮状态时，去掉图片的阴影效果
提示：通过box-shadow去掉图片阴影效果
效果图：
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style> 7 body { 8 margin-top: 5em; 9 text-align: center; 10 color: #414142; 11 background: rgb(246,241,232); 12 /*任务一、制作多背景*/ 13 background-image: -ms-radial-gradient(farthest-side ellipse at center, rgba(246,241,232,.85) 39%,rgba(212,204,186,.5) 100%), url("http://fs0.139js.com/file/s_jpg_857b081bjw1du3kveu19sj.jpg"); 14 background-image: -webkit-radial-gradient(farthest-side ellipse at center, rgba(246,241,232,.85) 39%,rgba(212,204,186,.5) 100%), url("http://fs0.139js.com/file/s_jpg_857b081bjw1du3kveu19sj.jpg"); 15 background-image: radial-gradient( farthest-side ellipse at center, rgba(246,241,232,.85) 39%,rgba(212,204,186,.5) 100%), url("http://fs0.139js.com/file/s_jpg_857b081bjw1du3kveu19sj.jpg"); 16 /*任务二、控制背景图像尺寸*/ 17 background-size: cover; 18 } 19 20 h1, em, #information { 21 display: block; 22 font-size: 25px; 23 font-weight: normal; 24 margin: 2em auto; 25 } 26 27 a { 28 color: #414142; 29 font-style: normal; 30 text-decoration: none; 31 font-size: 20px; 32 } 33 34 a:hover { 35 text-decoration: underline; 36 } 37 38 #container { 39 margin: 0 auto; 40 width: 1024px; 41 } 42 43 .wrapper { 44 display: inline-block; 45 width: 310px; 46 height: 100px; 47 vertical-align: top; 48 margin: 1em 1.5em 2em 0; 49 cursor: pointer; 50 position: relative; 51 font-family: Tahoma, Arial; 52 -webkit-perspective: 4000px; 53 -moz-perspective: 4000px; 54 -ms-perspective: 4000px; 55 -o-perspective: 4000px; 56 perspective: 4000px; 57 } 58 59 .item { 60 height: 100px; 61 -webkit-transform-style: preserve-3d; 62 -moz-transform-style: preserve-3d; 63 -ms-transform-style: preserve-3d; 64 -o-transform-style: preserve-3d; 65 transform-style: preserve-3d; 66 /*任务三、给每个列表项添加过渡动画效果*/ 67 68 -webkit-transition: -webkit-transform .6s; 69 -moz-transition: -moz-transform .6s; 70 -ms-transition: -ms-transform .6s; 71 -o-transition: -o-transform .6s; 72 transition: transform .6s; 73 } 74 75 .item:hover { 76 /*任务四、悬浮状态改变每个列表项的transform效果*/ 77 78 -webkit-transform: translateZ(-50px) rotateX(95deg); 79 -moz-transform: translateZ(-50px) rotateX(95deg); 80 -ms-transform: translateZ(-50px) rotateX(95deg); 81 -o-transform: translateZ(-50px) rotateX(95deg); 82 transform: translateZ(-50px) rotateX(95deg); 83 } 84 85 .itemimg { 86 display: block; 87 position: absolute; 88 top: 0; 89 /*任务五、设置列表项图片的圆角和阴影效果*/ 90 border-radius: 3px; 91 box-shadow: 0px 3px 8px rgba(0,0,0,0.3); 92 93 -webkit-transform: translateZ(50px); 94 -moz-transform: translateZ(50px); 95 -ms-transform: translateZ(50px); 96 -o-transform: translateZ(50px); 97 transform: translateZ(50px); 98 -webkit-transition: all .6s; 99 -moz-transition: all .6s; 100 -ms-transition: all .6s; 101 -o-transition: all .6s; 102 transition: all .6s; 103 width: 310px; 104 height: 100px; 105 } 106 107 .item .information { 108 display: block; 109 position: absolute; 110 top: 0; 111 height: 80px; 112 width: 290px; 113 text-align: left; 114 border-radius: 15px; 115 padding: 10px; 116 font-size: 12px; 117 text-shadow: 1px 1px1pxrgba(255,255,255,0.5); 118 box-shadow: none; 119 background: rgb(236,241,244); 120 /*任务六、给底层显示文本的层级设置渐变效果*/ 121 122 background: -webkit-linear-gradient(to bottom, rgba(236,241,244,1) 0%,rgba(190,202,217,1) 100%); 123 background: -ms-linear-gradient(to bottom, rgba(236,241,244,1) 0%,rgba(190,202,217,1) 100%); 124 background: linear-gradient(to bottom, rgba(236,241,244,1) 0%,rgba(190,202,217,1) 100%); 125 126 -webkit-transform: rotateX(-90deg) translateZ(50px); 127 -moz-transform: rotateX(-90deg) translateZ(50px); 128 -ms-transform: rotateX(-90deg) translateZ(50px); 129 -o-transform: rotateX(-90deg) translateZ(50px); 130 transform: rotateX(-90deg) translateZ(50px); 131 -webkit-transition: all .6s; 132 -moz-transition: all .6s; 133 -ms-transition: all .6s; 134 -o-transition: all .6s; 135 transition: all .6s; 136 } 137 138 .information strong { 139 display: block; 140 margin: .2em 0 .5em 0; 141 font-size: 20px; 142 font-family: "Oleo Script"; 143 } 144 .item:hoverimg { 145 /*任务七、列表项悬浮状态时，去掉图片的阴影效果*/ 146 147 box-shadow: none; 148 border-radius: 15px; 149 } 150 151 .item:hover .information { 152 box-shadow: 0px 3px 8px rgba(0,0,0,0.3); 153 border-radius: 3px; 154 } 155 </style> 156 </head> 157 <body> 158 <div id="container"> 159 <h1>CSS3 3D变形制作视频展示区</h1> 160 161 <div class="wrapper"> 162 <div class="item"> 163 <img src="http://pic2.qiyipic.com/image/20140415/4e/32/5f/v_105669963_m_601_180_101.jpg" /> 164 <span class="information"> 165 <strong>澳门风云</strong>闻名中外，曾担任美国赌场保安总顾问的魔术手石一坚，终回流澳门退休，更宴请各方朋友到来庆祝生日宴. 166 </span> 167 </div> 168 </div> 169 170 <div class="wrapper"> 171 <div class="item"> 172 <img src="http://pic4.qiyipic.com/image/20140417/b5/01/81/a_100003950_m_601_m2_180_101.jpg" /> 173 <span class="information"> 174 <strong>改过迁善</strong>该剧讲述了金明民饰演的律师在失忆后回顾自己以往的所作所为心生忏悔，为弥补自己犯下的错误而与自己曾经工作过的律师事务所对簿公堂的故事。 175 </span> 176 </div> 177 </div> 178 179 <div class="wrapper"> 180 <div class="item"> 181 <img src="http://pic1.qiyipic.com/common/lego/20140521/4515581d06cc4d5b8ab320da2cf3778d.jpg" /> 182 <span class="information"> 183 <strong>父子刑警</strong>本剧改编自雫井修介小说《Bitter Blood》。剧中，新晋刑警?佐原夏辉（佐藤健饰）被分配到银座警察 184 </span> 185 </div> 186 </div> 187 188 <div class="wrapper"> 189 <div class="item"> 190 <img src="http://pic5.qiyipic.com/image/20140319/7a/8d/4f/a_100003478_m_601_m1_180_101.jpg" /> 191 <span class="information"> 192 <strong>果宝特攻3</strong>果宝特攻3,顾名思义是果宝特攻的第二部续集,已在国家广播电影电视总局备案.暂定剧情为:菠萝吹雪偶然间穿越到了古代的水果世界 193 </span> 194 </div> 195 </div> 196 <div class="wrapper"> 197 <div class="item"> 198 <img src="http://pic0.qiyipic.com/image/20140517/ce/e8/42/v_106167752_m_601_180_101.jpg" /> 199 <span class="information"> 200 <strong>红眼</strong>1988年7月16日，从汉城始发的列车发生了一起严重的交通事故，造成100多人死亡。 201 </span> 202 </div> 203 </div> 204 <div class="wrapper"> 205 <div class="item"> 206 <img src="http://pic6.qiyipic.com/image/20140303/da/e9/aa/v_105073913_m_601_180_101.jpg" /> 207 <span class="information"> 208 <strong>熊出没之夺宝熊兵</strong>一场漆黑雨夜的意外事故，一段笑料十足的误打误撞，将两个外表相似却内容各异的箱子调换。 209 </span> 210 </div> 211 </div> 212 </div> 213 </body> 214 </html>
CSS3特效----制作3D旋转照片展示区
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。