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);否则会覆盖到正面的上面