css3製作的3d效果

html:圖片自己找個替換上去

HOT

HOT

HOT

css:#content_quiz section{ position:relative; -webkit-perspective:2; float:left; width:25%; margin-right:5%;}#content_quiz section .film {-webkit-transform-style:preserve-3d; height:390px; }#content_quiz section .film div{ position:absolute;-webkit-backface-visibility:hidden;}#content_quiz section .back{ height:390px; background:#000; font-size:20em; color:#fff; font-weight:bold; -webkit-transform:rotateY(180deg);}#content_quiz section .film:hover{ -webkit-transform:rotateY(180deg);}需要注意的地方：1.-webkit-perspective:2；設置透視，開啓3d模式，開啓後，只有該父級元素的第一個子元素才能延續它的透視。2.section下的第一個子元素必須設置高度，要不然section浮動後，都重疊在一起了3.film下的div，必須加backface-visibility：hidden和絕對定位；來隱藏掉反面，反面的那個div必須加上transform:rotateY(180deg);否則會覆蓋到正面的上面