企业网站,个人博客等WordPress网站以及其他语言网站开发定制需求加QQ详聊。

css3制作3D旋转变形视频展示区

HTML CSS 码云 34℃ 0评论
目录
[隐藏]

通过我们之前学习的css3教程,相信大家对css3的属性不陌生,并有一定的认知,如何将学到的知识综合利用起来做些动画例子,我想这是很多学完css3教程后大家的心声,这也是检验我们能否学以致用的关键,也是一个巩固知识的过程,接下来我们一起用css3教程学到的知识做个3D旋转变形视频展示区,先看一下今天要实现的效果是什么样的。
css3制作3D旋转变形视频展示区

上图的效果就是我们今天实现的内容,大家先不要看下面的实现方法,如果让你实现,你会怎么入手做,想一下然后再往下看具体实现方式。

这里我分为七个任务去实现这个效果,每个任务对应的实现小提示写出来给大家作为一个参考,具体实现代码也有相关注释,方便大家学习。

一、制作多背景

提示:上层有一个径向渐变,渐变图像farthest-sideellipseatcenter,rgba(246,241,232,.85)39%,rgba(212,204,186,.5)100%),底层使用背景图片:http://fs0.139js.com/file/s_jpg_857b081bjw1du3kveu19sj.jpg

二、控制背景图像尺寸

提示:使用background-size,让两层背景都是全屏显示

三、给每个列表项添加过渡动画效果

提示:使用transition属性,给每个列表项.item设置变形过渡效果。transition:-webkit-transform.6s;

四、悬浮状态改变每个列表项的transform效果

提示:通过transform属性,在列表悬浮状态设置3D旋转效果:translateZ(-50px)rotateX(95deg);

五、设置列表项图片的圆角和阴影效果

提示:通过border-radius和box-shadow给图像设置圆角和阴影效果。

六、给底层显示文本的层级设置渐变效果

提示:使用CSS3渐变属性设置选项卡文本层的背景效果

七、列表项悬浮状态时,去掉图片的阴影效果

提示:通过box-shadow去掉图片阴影效果

实现代码如下:

HTML代码

<div id="container">
	<h1>CSS3 3D变形制作视频展示区</h1>

	<div class="wrapper">
		<div class="item">
			<img src="http://pic2.qiyipic.com/image/20140415/4e/32/5f/v_105669963_m_601_180_101.jpg" />
			<span class="information">
				<strong>澳门风云</strong>闻名中外,曾担任美国赌场保安总顾问的魔术手石一坚,终回流澳门退休,更宴请各方朋友到来庆祝生日宴.
			</span>
		</div>
	</div>

	<div class="wrapper">
		<div class="item">
			<img src="http://pic4.qiyipic.com/image/20140417/b5/01/81/a_100003950_m_601_m2_180_101.jpg" />
			<span class="information">
			<strong>改过迁善</strong>该剧讲述了金明民饰演的律师在失忆后回顾自己以往的所作所为心生忏悔,为弥补自己犯下的错误而与自己曾经工作过的律师事务所对簿公堂的故事。
			</span>
		</div>
	</div>

	<div class="wrapper">
		<div class="item">
			<img src="http://pic1.qiyipic.com/common/lego/20140521/4515581d06cc4d5b8ab320da2cf3778d.jpg" />
			<span class="information">
			<strong>父子刑警</strong>本剧改编自雫井修介小说《Bitter Blood》。剧中,新晋刑警•佐原夏辉(佐藤健饰)被分配到银座警察
			</span>
		</div>
	</div>

	<div class="wrapper">
		<div class="item">
			<img src="http://pic5.qiyipic.com/image/20140319/7a/8d/4f/a_100003478_m_601_m1_180_101.jpg" />
			<span class="information">
			<strong>果宝特攻3</strong>果宝特攻3,顾名思义是果宝特攻的第二部续集,已在国家广播电影电视总局备案.暂定剧情为:菠萝吹雪偶然间穿越到了古代的水果世界
			</span>
		</div>
	</div>
	<div class="wrapper">
		<div class="item">
			<img src="http://pic0.qiyipic.com/image/20140517/ce/e8/42/v_106167752_m_601_180_101.jpg" />
			<span class="information">
			<strong>红眼</strong>1988年7月16日,从汉城始发的列车发生了一起严重的交通事故,造成100多人死亡。
			</span>
		</div>
	</div>
	<div class="wrapper">
		<div class="item">
			<img src="http://pic6.qiyipic.com/image/20140303/da/e9/aa/v_105073913_m_601_180_101.jpg" />
			<span class="information">
			<strong>熊出没之夺宝熊兵</strong>一场漆黑雨夜的意外事故,一段笑料十足的误打误撞,将两个外表相似却内容各异的箱子调换。
			</span>
		</div>
	</div>
</div>

css代码

body {
	margin-top: 5em;
	text-align: center;
	color: #414142;
	background: rgb(246,241,232);
	/*任务一、制作多背景*/
	background-image: -ms-radial-gradient(farthest-side ellipse at center,  rgba(246,241,232,.85) 39%,rgba(212,204,186,.5) 100%), url("http://fs0.139js.com/file/s_jpg_857b081bjw1du3kveu19sj.jpg");
	background-image: -webkit-radial-gradient(farthest-side ellipse at center,  rgba(246,241,232,.85) 39%,rgba(212,204,186,.5) 100%), url("http://fs0.139js.com/file/s_jpg_857b081bjw1du3kveu19sj.jpg");
	background-image: radial-gradient( farthest-side ellipse at center,  rgba(246,241,232,.85) 39%,rgba(212,204,186,.5) 100%), url("http://fs0.139js.com/file/s_jpg_857b081bjw1du3kveu19sj.jpg");
	/*任务二、控制背景图像尺寸*/
	background-size: cover;
}

h1, em, #information {
	display: block;
	font-size: 25px;
	font-weight: normal;
	margin: 2em auto;
}

a {
	color: #414142;
	font-style: normal;
	text-decoration: none;
	font-size: 20px;
}
		
a:hover {
	text-decoration: underline;
}
		
#container {
	margin: 0 auto;
	width: 1024px;
}
	
.wrapper {
	display: inline-block;
	width: 310px;
	height: 100px;
	vertical-align: top;
	margin: 1em 1.5em 2em 0;
	cursor: pointer;
	position: relative;
	font-family: Tahoma, Arial;
	-webkit-perspective: 4000px;
	-moz-perspective: 4000px;
	-ms-perspective: 4000px;
	-o-perspective: 4000px;
	perspective: 4000px;
}

.item {
	height: 100px;
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	-ms-transform-style: preserve-3d;
	-o-transform-style: preserve-3d;
	transform-style: preserve-3d;
	/*任务三、给每个列表项添加过渡动画效果*/

	-webkit-transition: -webkit-transform .6s;
	-moz-transition: -moz-transform .6s;
	-ms-transition: -ms-transform .6s;
	-o-transition: -o-transform .6s;
	transition: transform .6s;
}

.item:hover {
	/*任务四、悬浮状态改变每个列表项的transform效果*/

	-webkit-transform: translateZ(-50px) rotateX(95deg);
	-moz-transform: translateZ(-50px) rotateX(95deg);
	-ms-transform: translateZ(-50px) rotateX(95deg);
	-o-transform: translateZ(-50px) rotateX(95deg);
	transform: translateZ(-50px) rotateX(95deg);
}

.itemimg {
	display: block;
	position: absolute;
	top: 0;
	/*任务五、设置列表项图片的圆角和阴影效果*/
	border-radius: 3px;
	box-shadow: 0px 3px 8px rgba(0,0,0,0.3);

   -webkit-transform: translateZ(50px);
   -moz-transform: translateZ(50px);
   -ms-transform: translateZ(50px);
   -o-transform: translateZ(50px);
	transform: translateZ(50px);
   -webkit-transition: all .6s;
   -moz-transition: all .6s;
   -ms-transition: all .6s;
   -o-transition: all .6s;
	transition: all .6s;
	width: 310px; 
	height: 100px;
 }

.item .information {
	display: block;
	position: absolute;
	top: 0;
	height: 80px;
	width: 290px;
	text-align: left;
	border-radius: 15px;
	padding: 10px;
	font-size: 12px;
	text-shadow: 1px 1px1pxrgba(255,255,255,0.5);
	box-shadow: none;
	background: rgb(236,241,244);
	/*任务六、给底层显示文本的层级设置渐变效果*/

	background: -webkit-linear-gradient(to bottom,  rgba(236,241,244,1) 0%,rgba(190,202,217,1) 100%);
	background: -ms-linear-gradient(to bottom,  rgba(236,241,244,1) 0%,rgba(190,202,217,1) 100%);
	background: linear-gradient(to bottom,  rgba(236,241,244,1) 0%,rgba(190,202,217,1) 100%);

	-webkit-transform: rotateX(-90deg) translateZ(50px);
	-moz-transform: rotateX(-90deg) translateZ(50px);
	-ms-transform: rotateX(-90deg) translateZ(50px);
	-o-transform: rotateX(-90deg) translateZ(50px);
	transform: rotateX(-90deg) translateZ(50px);
	-webkit-transition: all .6s;
	-moz-transition: all .6s;
	-ms-transition: all .6s;
	-o-transition: all .6s;
	transition: all .6s;
 }

.information strong {
	display: block;
	margin: .2em 0 .5em 0;
	font-size: 20px;
	font-family: "Oleo Script";
  }
.item:hoverimg {
	/*任务七、列表项悬浮状态时,去掉图片的阴影效果*/

	box-shadow: none;
	border-radius: 15px;
}

.item:hover .information {
	box-shadow: 0px 3px 8px rgba(0,0,0,0.3);
	border-radius: 3px;
 }

以上就是全部demo的实现代码,也是对我们之前学的css3教程所有知识点的的一个总结,希望通过该例子能够让大家有个质的提升,如果对css3的知识还没有掌握的很好,请移步到css3教程继续学习加深css3知识点。代码这种东西还是需要我们多动手多思考才能手不生,得心应手。

转载请注明:码云笔记 » css3制作3D旋转变形视频展示区

喜欢 (2)or分享 (0)
发表我的评论
取消评论
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(1)个小伙伴在吐槽
  1. 收藏了
    XP你发句2018-11-17 12:23 回复