当前位置： 首页 > Web前端 > HTML

3D穿梭效应？周末在家使用CSS轻松搞定

时间：2023-03-28 15:49:48 HTML

鍚庡彴涔犳儻鎬х櫥褰旳pex锛屽噯澶囩帺鍑犲眬銆傚湪鐧诲綍鍔犻€熷櫒鐨勮繃绋嬩腑锛屽彂鐜板姞閫熷櫒宸茬粡杩囨湡銆傛垜涓€鐩村湪鐢ㄨ吘璁綉娓稿姞閫熷櫒锛屼絾鏄偣鍏呭€兼寜閽殑鏃跺€欐彁绀哄鎴风鏈€杩戝崌绾т簡锛屾殏鏃朵笉鏀寔鍏呭€硷紙杩欎釜鎿嶄綔鍚撳埌鎴戜簡~锛夈€傚彧鑳芥帀澶村幓涓嬭浇缃戞槗UU鍔犻€熷櫒浜嗐€傛墦寮€UU鍔犻€熷櫒棣栭〉锛屾槧鍏ョ溂甯樼殑鏄繖鏍蜂竴寮犲浘鐗囷細鐬棿锛屼綘灏辫瀹冪殑鑳屾櫙鍥炬墍鍚稿紩銆傚嚭浜庡CSS鐨勬晱鎰燂紝鎴戠洸鐩寽娴嬭繖鏄敤CSS瀹炵幇鐨勶紝鑷冲皯搴旇鏄疌anvas銆傛墦寮€鎺у埗鍙帮紝鏈夌偣澶辨湜锛屽眳鐒舵槸涓€涓?mp4鏂囦欢锛氱湅缃戠粶闈㈡澘锛岃繖涓?mp4鏂囦欢灞呯劧闇€瑕?.5M锛焑mm锛屾殏鏃朵笉鎯崇帺娓告垙浜嗐€侰SS涓嶈兘澶勭悊杩欐牱鐨勮儗鏅浘鐗囧悧锛熺敤CSS3D瀹炵幇鏄熼檯3D绌挎鏁堟灉锛屾垜鍦ㄦ兂CSS3D鍔ㄧ敾|浠呬娇鐢–SS鍙互鍒朵綔鍑哄涔堢濂囩殑鍔ㄧ敾锛熶篃鎻愬埌杩囷紝鏈夊叴瓒ｇ殑鍙互涓€璧风湅鐪嬨€傚亣璁炬垜浠湁杩欐牱涓€涓浘锛氳繖涓浘鍏堟斁鍦ㄤ竴杈广€傚湪浣跨敤杩欏紶鍥句箣鍓嶏紝鎴戜滑浼氬厛缁樺埗杩欐牱涓€涓浘褰細

body{background:#000;}.g-container{position:relative;}.g-group{position:absolute;瀹藉害锛?00px锛涢珮搴︼細100px锛涘乏锛?50px锛涢《閮細-50px锛涘彉鎹㈡牱寮忥細淇濈暀3d锛泒.item{浣嶇疆锛氱粷瀵癸紱瀹藉害锛?00%锛涢珮搴︼細100%锛涜儗鏅細rgba(255,255,255,.5);}.item-right{鑳屾櫙锛氱孩鑹?transform:rotateY(90deg)translateZ(50px);}.item-left{鑳屾櫙锛氱豢鑹?transform:rotateY(-90deg)translateZ(50px);}.item-top{鑳屾櫙锛氳摑鑹?transform:rotateX(90deg)translateZ(50px);}.item-bottom{鑳屾櫙锛歞eeppink;鍙樻崲锛歳otateX(-90deg)translateZ(50px);}.item-middle{鑳屾櫙锛歳gba(255,255,255,0.5);transform:rotateX(180deg)translateZ(50px);}涓€鍏辫缃簡5涓瓙鍏冪礌锛屼絾鏄粩缁嗙湅css浠ｇ爜锛屽叾涓?涓瓙鍏冪礌閮借缃负rotateX/Y(90deg/-90deg)锛屽嵆缁昘杞存垨Y杞存棆杞?0掳锛屽湪瑙嗚涓婃槸涓€涓瀭鐩翠簬灞忓箷鐨勫钩闈紝鎵€浠ユ垜浠洿瑙備笂鐪嬩笉鍒般€傚彧鑳界湅鍒颁竴鏋堕鏈恒€俰tem-middle鎴戠粰5涓瓙椤瑰垎鍒缃簡涓嶅悓鐨勮儗鏅壊锛岀粨鏋滃涓嬶細鐜板湪鐪嬭捣鏉ュソ鍍忓緢鏅€氾紝涔熺‘瀹炲緢鏅€氥€傜劧鑰岋紝瑙佽瘉濂囪抗鐨勬椂鍒诲埌浜嗐€傝繖鏃跺€欐垜浠粰鐖跺厓绱?g-container璁剧疆涓€涓緢灏忕殑瑙嗚锛屾瘮濡傝缃竴涓瑙掞細4px锛岀湅鐪嬫晥鏋滐細.g-container{position:relative;+perspective:4px;}//...鍏朵粬鏍峰紡淇濇寔涓嶅彉銆傝繖鏃跺€欑敾椋庣獊鐒朵竴鍙橈紝鏁翠釜鏁堟灉鍙樻垚浜嗚繖鏍凤細鐢变簬閫忚鐨勪綔鐢紝鍘熸湰鐨勫钩闈㈡晥鏋滃彉鎴愪簡3D鏁堟灉銆傛帴涓嬫潵鎴戜滑鐢ㄤ笂闈㈠噯澶囩殑鏄熺┖鍥剧墖鏉ユ浛鎹笂闈㈢殑鑳屾櫙鑹诧紝鍏ㄩ儴鏇挎崲鎴愬悓涓€寮犲浘鐗囥€傜濂囩殑浜嬫儏鍙戠敓浜嗭細鍥犱负璁剧疆鐨刾erspective寰堝皬锛岃€屾瘡涓€椤圭殑transform:translateZ(50px)璁剧疆鐨勬瘮杈冨ぇ锛屾墍浠ュ浘鐗囧湪瑙嗚涓婅鎷変几鐨勫緢鍘夊銆備絾鏄暣浣撳氨鏄崰婊′簡鏁翠釜灞忓箷銆傛帴涓嬫潵锛屾垜浠彧闇€瑕佺Щ鍔ㄨ瑙掞紝缁欑埗鍏冪礌娣诲姞鍔ㄧ敾锛岄€氳繃鎺у埗鐖跺厓绱犵殑translateZ()鏀瑰彉鍗冲彲锛氳瑙掞細4px锛涢€忚鍘熺偣锛?0%50%锛泒.g-group{浣嶇疆锛氱粷瀵癸紱//...涓€浜涘畾浣嶉珮瀹界殑浠ｇ爜transform-style:preserve-3d;+鍔ㄧ敾锛氱Щ鍔?s鏃犻檺绾挎€э紱}@keyframes绉诲姩{0%{鍙樻崲锛歵ranslateZ(-50px)rotate(0deg);}100%{杞崲锛歵ranslateZ(50px)rotate(0deg);}}鐪嬶紝绁炲濂囧鐨勬槦绌虹┛姊晥鏋滃嚭鏉ヤ簡锛屾儕鑹筹細缇庝腑涓嶈冻鐨勬槸鍔ㄧ敾鏃犳硶鏃犻檺琛旀帴锛屽紑澶村拰缁撳熬閮藉瓨鍦ㄥ緢澶х殑闂銆傚綋鐒讹紝杩欏鎴戜滑鏉ヨ骞朵笉闅撅紝鎴戜滑鍙互锛氶€氳繃鍙犲姞涓ゅ鐩稿悓鐨勬晥鏋滐紝涓€濂楅€氳繃璐熷姩鐢?寤惰繜鍏堜簬鍙︿竴濂楀墠杩涳紝杩欐牱灏卞彲浠ュ皢涓ゅ鍔ㄧ敾杩炶捣鏉ワ紙褰撲竴濂楀畬浜嗭紝鍙︿竴濂楄繕鍦ㄥ姩锛夌劧鍚庨€氳繃閫忔槑搴︾殑鍙樺寲锛岄殣钘忎竴涓媔tem-middleflying鐨勭獊鐒舵劅瑙夋渶鍚庡彲浠ラ€氳繃鐖跺厓绱犵殑filterhue-rotate鏉ユ帶鍒跺浘鐗囩殑棰滆壊鍙樺寲.鎴戜滑灏濊瘯淇敼HTML缁撴瀯濡備笅锛歩temitem-left">