源代码，有几个问题，大家可以看看，就是我觉得 .photo_wrap 只是把图片翻转好，而 .photo_font .photo_wrap 才是真正的翻转，不知道说得对不对，老师也看看呗！-慕课网

源代码，有几个问题，大家可以看看，就是我觉得 .photo_wrap 只是把图片翻转好，而 .photo_font .photo_wrap 才是真正的翻转，不知道说得对不对，老师也看看呗！

来源：2-3 3D效果编写

summerstarry

2015-06-07 09:07

<!DOCTYPE html>
<html>
	<head>
		<title>显示周几</title>
		<meta charset="utf-8" />

		<style type="text/css">

			*{
				margin: 0;padding: 0;
			}
			body{
				font-family: "Microsoft Yahei";
				-webkit-font-smoothing: antialiased;
				background: #fff;
				color: #555;
				font-size: 14px;
			}
			@font-face{
				font-family: myFont;
				src: url(../font/MyriadPro-Light.otf);
			}

			/* 整体内容 */
			.wrap {
				width: 100%; height: 600px;
				position: absolute; top: 50%;
				margin-top: -300px;
				background-color: #333;
				overflow: hidden;

				-webkit-perspective: 800px;
			}

			/* 海报样式 */
			.photo {
				width: 260px; height: 320px;
				position: absolute;
				z-index: 1; /* 此处: 设置给居中的海报 */
				box-shadow: 0, 0, 1px rgba( 0, 0, 0, 0.01 );
			}

			.photo .side {
				width: 100%; height: 100%;
				background-color: #eee;
				position: absolute; top: 0; right: 0;
				padding: 20px;

				box-sizing: border-box;
			}

			.photo .side_font {}
			.photo .side_font .image {
				width: 100%; height: 250px;
				line-height: 250px;
				overflow: hidden;
			}
			.photo .side_font img {
				width: 100%;
			}
			.photo .side_font .caption {
				text-align: center;
				font-size: 16px;
				line-height: 50px;
			}

			.photo .side_back {
				color: #666;
				font-size: 14px;
				line-height: 1.5em;
			}

			/* 当前选中的海报 */
			.photo_center {
				width: 260px; height: 320px;
				top: 50%; left: 50%;
				margin: -160px 0 0 -130px;
				z-index: 999;
			}


			/* 负责3D翻转，这里只是把图片两面定位好 */
			.photo_wrap {
				position: absolute;
				width: 100%; height: 100%;

				-webkit-transform-style: preserve-3d;
			}

			.photo_wrap .side_font {
				-webkit-transform: rotateY( 0deg );
			}
			.photo_wrap .side_back {
				-webkit-transform: rotateY( 180deg );
			}

			.photo_wrap .side {
				-webkit-backface-visibility: hidden;
			}

			/* 这里才是控制翻转，想要显示正面，把下面的 class 切换即可 */
			.photo_font .photo_wrap {
				-webkit-transform: rotateY( 0deg );
			}
			.photo_back .photo_wrap {
				-webkit-transform: rotateY( 180deg );
			}
		</style>

		<script type="text/javascript">
		</script>

	</head>

	<body>

		<!-- 海报画廊 -->
		<div class="wrap">
			
			<!-- photo 负责2D平移旋转  最后的 class 负责翻转-->
			<div class="photo photo_center photo_back">
				
				<!-- photo_wrap 负责定位 -->
				<div class="photo_wrap">
					<!-- 图片正面 -->
					<div class="side side_font">
						<p class="image"><img src="images/1.jpg" alt="图片" /></p>
						<p class="caption">麦兜我和我妈妈</p>
					</div>
					<!-- 图片背面 -->
					<div class="side side_back">
						<p class="desc">描述信息</p>
					</div>
				</div>

			</div>

		</div>

	</body>
</html>

写回答关注

5回答

慕雪9025550

2016-03-22 23:31:59

已采纳

原来我是在html中的class内的类名前多加了一个点（直接从样式那复制过来的），真的快疯。看了好久le。。。

0 0
我爱谭美

2016-07-28 17:11:52

啊啊我把transform给拼错了

0 0
super_rabbit

2016-05-15 00:48:23

应该是</style>吧

1 0

summer...

哈，啥东东？

2016-09-22 19:18:26

共 1 条回复 >
慕雪9025550

2016-03-22 23:16:43

我的代码，怎么弄都不对，把你的代码复制下来结果是好的，我现在导师一个一个单词对，看看到底哪里不对了，真是气死我了！

0 0
小0江

2016-01-03 16:00:23

都没有代码下载，，看不了

0 0