CSS3 3d旋转悬浮效果,在线可运行编辑代码

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%

{{collectdata}}

网友评论0