CSS3中如何实现图片翻转
今天将和大家分享如何利用CSS3中的知识来制作一个图片翻转的功能，CSS3中图片翻转效果主要通过设置transition过渡动画以及transform旋转动画来共同实现
【推荐课程：CSS3教程】
案例分析
图片翻转效果的思路：先利用position定位将两个图片重叠到一起同时还需要将背面的图片隐藏，这样给人的效果是页面上仅有一张图片，但是当鼠标触发时，后面的图片旋转显示出现在前面，而原先在前面的图片则旋转隐藏到后面。
（1）position：定位
relative：相对定位
absolute：绝对定位
（2） backface-visibility：隐藏被旋转的 div 元素的背面
visible ：背面是可见的
hidden：背面是不可见的
（3）z-index 属性
设置元素的堆叠顺序，设置的值越大层级越高，在页面中越前
（4）transition-property：设置需要过渡效果的CSS属性名
none ：没有属性会获得过渡效果
all：所有属性都将会获得过渡效果
property：定义应用过渡效果的 CSS 属性名称列表，列表以逗号分隔。
（5）transition-duration：完成过渡效果需要多少秒或毫秒
（6）transition-timing-function：完成过渡效果的速度曲线
linear：匀速
ease：先慢后快然后再慢 规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。
cubic-bezier(n,n,n,n)：在 cubic-bezier 函数中定义自己的值，可能的值是 0 至 1 之间的数值。
（7）transition-delay：过渡效果是否延迟，从何时开始
（8）transform 属性：元素应用 2D 或 3D 转换
例：rotateX(180deg)：沿X轴旋转180度
注意浏览器兼容问题
-moz- ：Firefox
-webkit-：Safari 和 Chrome
-o- ：Opera
完整代码：
本案例在chrome浏览器中运行
效果图
动态效果
总结：
绛旓細浠婂ぉ灏嗗拰澶у鍒嗕韩濡備綍鍒╃敤CSS3涓殑鐭ヨ瘑鏉ュ埗浣滀竴涓浘鐗囩炕杞殑鍔熻兘锛CSS3涓浘鐗囩炕杞晥鏋滀富瑕侀氳繃璁剧疆transition杩囨浮鍔ㄧ敾浠ュ強transform鏃嬭浆鍔ㄧ敾鏉ュ叡鍚屽疄鐜銆愭帹鑽愯绋嬶細CSS3鏁欑▼銆戞渚嬪垎鏋愬浘鐗囩炕杞晥鏋滅殑鎬濊矾锛氬厛鍒╃敤position瀹氫綅灏嗕袱涓浘鐗囬噸鍙犲埌涓璧峰悓鏃惰繕闇瑕佸皢鑳岄潰鐨勫浘鐗囬殣钘忥紝杩欐牱缁欎汉鐨勬晥鏋滄槸椤甸潰涓婁粎鏈変竴寮犲浘鐗...
绛旓細鍏蜂綋鐨姝ラ濡備笅锛1銆佸啓鍑洪〉闈富浣擄紝 2銆侀氳繃瀹氫綅浣夸袱寮鍥剧墖鍙犲姞鍦ㄤ竴璧穌iv img { width: 250px; height: 170px; position: absolute; top: 0; left: 0; transition: all 1s; }3銆佽缃涓寮犲浘鐗囪儗闈笉鍙div img:first-child { z-index: 1; backface-visibility: hidden; }4銆佹坊鍔犳棆...
绛旓細鏂规硶涓锛1銆瀹炵幇CSS鏍峰紡鐨勬柟娉曚唬鐮佸涓嬨2銆佸疄鐜板墠绔竷灞鐨勬柟娉曚唬鐮佸涓嬨3銆瀹炵幇鍥剧墖缈昏浆CSS鏍峰紡浠ｇ爜濡備笅銆傛柟娉曚簩锛1銆佸疄鐜版鍙嶉潰鏁堟灉鐨凥TML鐨勬柟娉曚唬鐮佸涓嬨2銆佸疄鐜癈SS鏍峰紡鐨勬柟娉曚唬鐮併3銆佺劧鍚庡疄鐜扮珫鍚戠炕杞殑鏂规硶浠ｇ爜濡備笅銆
绛旓細/* css3 璁╀竴涓鍥剧墖涓嶆柇缈昏浆绀轰緥浠ｇ爜 */#gavinPlay{/* background:color url x y repeat 鍥剧墖鏉ヨ嚜鐧惧害鍥剧墖锛屾寜闇瑕佹洿鎹 */background:red url("https://ss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=2406548182,3889596045&fm=80") center no-repeat;/* background-size:auto auto || cover ...
绛旓細a:link{background:url("a.jpg")} 閾炬帴榛樿鐘舵 a:visited{background:url("a.jpg")} 閾炬帴璁块棶杩囦互鍚鐨鐘舵 a:hover{background:url("b.jpg")} 褰撻紶鏍囩Щ鍔ㄤ笂鍘荤殑鐘舵 a:active{background:url("c.jpg")} 褰撳墠鐨勬椿鍔ㄧ姸鎬 鏀惧埌鏍峰紡閲岄潰灏卞彲浠ヤ簡 鍏蜂綋鐨勫鑸悕绉拌嚜宸卞畾涔夛紒
绛旓細|鈥斺斺擷杞 杩欐潯绾夸笂锛屾斁缃墿浣撶湅寰呯殑瑙掑害鏄粠 宸︿晶鏂圭湅鍚戝張娴嬬墿浣撶殑 鍦ㄤ粬涓嶆槸涓礋鏁板墠 鐗╀綋鐨勫句晶鏂瑰悜鍩烘湰鏄病鏈夊彉鍖栫殑锛岄櫎浜180搴 Y杞寸殑璇濓紝姝ｆ暟 鎷垮乏渚 |__ 鍨傜洿绾挎潵浣滐紝浠栧惧悜瑙嗚瑙掑害 鐢卞彸渚ф湜鍚戝乏渚 褰撳悓鏃 x 30 搴 Y30搴︽椂 鍏堟壘鍒癤杞缈昏浆鐨浣嶇疆锛屽啀浠杞村畾浣嶄簩娆＄炕杞...
绛旓細浠栦滑鐨瀛愬厓绱犺缃彉鍖栥2銆乷ne锛宼wo锛岃繖浜涘厓绱犱娇鐢ㄤ簡缁濆瀹氫綅銆備娇鐢ㄧ粷瀵瑰畾浣嶄富瑕佹槸锛屽ぇ瀹跺彉鎹互鍚庝腑闂存湁绌洪殭锛屼负浜嗘秷闄ょ┖闅欙紝浣跨敤translate3d瀵筜杩涜鍙樻崲娑堥櫎绌洪殭搴旇鏄笉琛岀殑锛屽洜涓哄彉鍖栦互鍚庣浉閭讳袱涓浘褰㈠ぇ灏忎笉涓鑷翠簡銆傚綋鐒3D绌洪棿涓袱涓笉涓鏍峰ぇ鐨勪笢瑗垮湪鍥剧墖涓婄湅璧锋潵涓鏍峰ぇ锛屽簲璇ヤ篃鏄彲浠ョ殑锛屼笉杩囪繖涓氨寰...
绛旓細-webkit-transform: rotate(360deg);-ms-transform: rotate(360deg);transform: rotate(360deg);瀹氫綅闂锛-webkit-transform: scale(0.9);-ms-transform: scale(0.9);transform: scale(0.9);濡傛灉鏄彉鎹鐨璇濓紝闇瑕佸姞涓 transition-property: all 0.3s ease;transition-duration: 1s;CSS3,灏辨槸...
绛旓細鍦℉TML缂栬緫鍣ㄤ笂鍗冲彲銆傞鍏堝皢涓や釜瑕佸睍绀虹殑鍥剧墖鍒╃敤瀹氫綅閲嶅彔鍦ㄤ竴璧枫傜劧鍚庡埄鐢CSS3鐨perspective缁撳悎transform锛歳atateY锛堬級灞炴瀹炵幇缈昏浆鏁堟灉鍗冲彲銆侶TM鏄疕yperTextMark-upLanguage鐨勭缉鍐欙紝鍗宠秴鏂囨湰鏍囪璇█锛堟爣鍑嗛氱敤鏍囪璇█涓嬬殑涓涓簲鐢級锛屾槸WWW鐨勬弿杩拌瑷銆
绛旓細绾css3瓒呴叿tabs閫夐」鍗″姩鐢荤壒鏁堟彃浠 杩欐槸涓娆句娇鐢ㄧ函css3鍒朵綔鐨勮秴閰穞abs閫夐」鍗″姩鐢荤壒鏁堟彃浠躲傝tabs閫夐」鍗℃彃浠跺叡鏈5绉嶇壒鏁堬紝鍒嗗埆鏄贰鍏ユ贰鍑恒佸脊鎬ф斁澶х缉灏忋佷笂涓嬫粦鍔ㄣ佹潵鍥缈昏浆绛夌壒鏁 鏁堟灉婕旂ず锛歨ttp://www.htmleaf.com/css3/animation/2014100764.html 涓嬭浇鍦板潃锛歨ttp://www.htmleaf.com/Demo/2014100762...
