CSS3 3d旋转 悬浮效果,在线可运行编辑代码
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>BFW 3D DEMO</title> <style> body { border: none; margin: 0; background-color: #0D3462; } li { list-style: none; } ul { margin: 0; padding: 0; } .contentbox { width: 1000px; margin: auto; margin-top: 2em; clear: left; } .qcontainer { -webkit-perspective: 400; -moz-perspective: 400; float: left; width: 220px; margin-right: 20px; } .film { width: 100%; height: 165px; -webkit-transform-style: preserve-3d; -webkit-transition: 1.5s; -moz-transform-style: preserve-3d; -moz-transition: 1.5s; } .qcontainer:hover .film { -webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); } .face { position: absolute; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; } .face img { width: 220px; } .face h3 { color: white; text-align: center; } .back { -webkit-transform: rotateY(180deg); -moz...
点击查看剩余70%
网友评论0