Heim >Web-Frontend >HTML-Tutorial >html+css实现3D旋转图片展示_html/css_WEB-ITnose

html+css实现3D旋转图片展示_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-24 11:49:061646Durchsuche

<strong><span style="font-size:12px;">      <title>MyHtml.html</title>    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">    <meta http-equiv="description" content="this is my page">    <meta http-equiv="content-type" content="text/html; charset=UTF-8">    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->	<style type="text/css">		*{margin:0px ; padding:0px}		body{background:url("imgs/bg.jpg")}		.list{width:1200px; height:700px;background:rgba(0,0,0,0.3 );			box-shadow:0px 0px 5px #000;margin:20px auto;}		.list ul{padding:2px 0px;list-style-type:none;}		.list ul li{width:240px;height:256px;			float:left;margin:36px 25px;padding:5px;			perspective:1000px;			}		.list .move{width:240px;height:256px;transform-style:preserve-3D;			transform:translateZ(-30px);			/*延长时间 */			transition:transform 12s}		.list .move .poster,.list .move .infor{position:absolute;			border:1px solid #99FF00;width:230px;			height:246px;			backface-visibility:hidden;			}		.list .move .poster{			transform:translateZ(130px);			}		.list .move .infor{			transform:rotateY(90deg) translateZ(130px);			}		.list ul li:hover .move{			transform:rotateY(-88deg) translateZ(20px);			}		.list ul li:hover .move .poster,.list .move .infor{			border-radius:12px;box-shadow:0px 0px 6px #CC00CC;overflow:hidden;			}	</style>      	<div class="list">  		<ul>  			<li>				<div class="move">					<div class="poster">						<img  src="imgs/1.jpg"    style="max-width:90%" height="246px/" alt="html+css实现3D旋转图片展示_html/css_WEB-ITnose" >					</div>					<div class="infor">						<img  src="imgs/2.jpg"    style="max-width:90%" height="246px/" alt="html+css实现3D旋转图片展示_html/css_WEB-ITnose" >					</div>				</div>			</li>			<li>				<div class="move">					<div class="poster">						<img  src="imgs/3.jpg"    style="max-width:90%" height="246px/" alt="html+css实现3D旋转图片展示_html/css_WEB-ITnose" >					</div>					<div class="infor">						<img  src="imgs/4.jpg"    style="max-width:90%" height="246px/" alt="html+css实现3D旋转图片展示_html/css_WEB-ITnose" >					</div>				</div>			</li>			<li>				<div class="move">					<div class="poster">						<img  src="imgs/5.jpg"    style="max-width:90%" height="246px/" alt="html+css实现3D旋转图片展示_html/css_WEB-ITnose" >					</div>					<div class="infor">						<img  src="imgs/6.jpg"    style="max-width:90%" height="246px/" alt="html+css实现3D旋转图片展示_html/css_WEB-ITnose" >					</div>				</div>			</li>			<li>				<div class="move">					<div class="poster">						<img  src="imgs/7.jpg"    style="max-width:90%" height="246px/" alt="html+css实现3D旋转图片展示_html/css_WEB-ITnose" >					</div>					<div class="infor">						<img  src="imgs/8.jpg"    style="max-width:90%" height="246px/" alt="html+css实现3D旋转图片展示_html/css_WEB-ITnose" >					</div>				</div>			</li>			<li>				<div class="move">					<div class="poster">						<img  src="imgs/9.jpg"    style="max-width:90%" height="246px/" alt="html+css实现3D旋转图片展示_html/css_WEB-ITnose" >					</div>					<div class="infor">						<img  src="imgs/10.jpg"    style="max-width:90%" height="246px/" alt="html+css实现3D旋转图片展示_html/css_WEB-ITnose" >					</div>				</div>			</li>			<li>				<div class="move">					<div class="poster">						<img  src="imgs/11.jpg"    style="max-width:90%" height="246px/" alt="html+css实现3D旋转图片展示_html/css_WEB-ITnose" >					</div>					<div class="infor">						<img  src="imgs/12.jpg"    style="max-width:90%" height="246px/" alt="html+css实现3D旋转图片展示_html/css_WEB-ITnose" >					</div>				</div>			</li>			<li>				<div class="move">					<div class="poster">						<img  src="imgs/13.jpg"    style="max-width:90%" height="246px/" alt="html+css实现3D旋转图片展示_html/css_WEB-ITnose" >					</div>					<div class="infor">						<img  src="imgs/14.jpg"    style="max-width:90%" height="246px/" alt="html+css实现3D旋转图片展示_html/css_WEB-ITnose" >					</div>				</div>			</li>			<li>				<div class="move">					<div class="poster">						<img  src="imgs/15.jpg"    style="max-width:90%" height="246px/" alt="html+css实现3D旋转图片展示_html/css_WEB-ITnose" >					</div>					<div class="infor">						<img  src="imgs/16.jpg"    style="max-width:90%" height="246px/" alt="html+css实现3D旋转图片展示_html/css_WEB-ITnose" >					</div>				</div>			</li>			<li>				<div class="move">					<div class="poster">						<img  src="imgs/17.jpg"    style="max-width:90%" height="246px/" alt="html+css实现3D旋转图片展示_html/css_WEB-ITnose" >					</div>					<div class="infor">						<img  src="imgs/18.jpg"    style="max-width:90%" height="246px/" alt="html+css实现3D旋转图片展示_html/css_WEB-ITnose" >					</div>				</div>			</li>			<li>				<div class="move">					<div class="poster">						<img  src="imgs/19.jpg"    style="max-width:90%" height="246px/" alt="html+css实现3D旋转图片展示_html/css_WEB-ITnose" >					</div>					<div class="infor">						<img  src="imgs/20.jpg"    style="max-width:90%" height="246px/" alt="html+css实现3D旋转图片展示_html/css_WEB-ITnose" >					</div>				</div>			</li>			<li>				<div class="move">					<div class="poster">						<img  src="imgs/21.jpg"    style="max-width:90%" height="246px/" alt="html+css实现3D旋转图片展示_html/css_WEB-ITnose" >					</div>					<div class="infor">						<img  src="imgs/22.jpg"    style="max-width:90%" height="246px/" alt="html+css实现3D旋转图片展示_html/css_WEB-ITnose" >					</div>				</div>			</li>  		</ul>  	</div>  </span></strong>

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn