CSS3 3D旋转盒子加缩放——WEB(二)

10.28-11.3 WEB(二)

上周作业复习WEB(一),整理资料
居中写三遍,JS原生轮播图背着能写出。
1、手风琴 这个是点了才动你可以写hover,hover之后滑动但是移出就还原,点击才像视频里这样,不还原,你可以用div背景色,或者自己找图这里面是有动画效果的,不是直接就变了。
2、css单位,px、em、rem、vmin、vmax
3、媒体查询
4、帧动画
5、3d盒子
6、还有个正方体,我找找这个有扩展,换图
7、百叶窗
8、再写一个JQ轮播图

上一篇:CSS3逐帧动画原理及其控制

这一篇3d盒子还是从基础入手,我也是看文档看视频总结出来的,慢慢一步一步体会吧。


3D旋转盒子加缩放

成品镇楼(自己的生活照,勿盗haha)

3D简述

什么是3d的场景呢?

2d场景,在屏幕上水平和垂直的交叉线x轴和y轴

3d场景,在垂直于屏幕的方法,相对于2d多出个z轴

Z轴:靠近屏幕的方向是正向,远离屏幕的方向是反向
CSS3 3D旋转盒子加缩放——WEB(二)_第1张图片

3D功能

CSS3中的3D变换主要包括以下几种功能函数:

  • 3D位移:CSS3中的3D位移主要包括translateZ()translate3d()两个功能函数;
  • 3D旋转:CSS3中的3D旋转主要包括rotateX()、rotateY()、rotateZ()和rotate3d(1,1,0,4deg)四个功能函数;4个参数,前三个,对应x,y,z 轴,是标示你是否希望沿着该轴旋转,是为1,不是为0,最后一个标示旋转的角度。
  • 3D缩放:CSS3中的3D缩放主要包括scaleZ()

本项目主要用到前两个,不用JS就能实现效果了。

perspective景深

生活中的3d 区别于2d的地方

1、近大远小 景深
程序中实现的方法 perspective 元素距离 视线的距离(物体和眼睛的距离越小,近大远小的效果越明显)

perspective: 1200px;(加在父元素上)
transform:perspective(1200px) (在子元素中使用)

两个都设置会发生冲突,建议只设置父元素,通常的数值在900-1200之间。
如果当你的视线距离物体足够远的时候,基本上就不会有近大远小的感觉

子元素设置什么呢?transform-style:preserve-3d

transform-style属性是3D空间一个重要属性,指定嵌套元素如何在3D空间中呈现。他主要有两个属性值:flatpreserve-3d

其中flat值为默认值,表示所有子元素在2D平面呈现。preserve-3d表示所有子元素在3D空间中呈现。

也就是说,如果对一个元素设置了transform-style的值为flat,则该元素的所有子元素都将被平展到该元素的2D平面中进行呈现。沿着X轴或Y轴方向旋转该元素将导致位于正或负Z轴位置的子元素显示在该元素的平面上,而不是它的前面或者后面。如果对一个元素设置了transform-style的值为preserve-3d,它表示不执行平展操作,他的所有子元素位于3D空间中。
CSS3 3D旋转盒子加缩放——WEB(二)_第2张图片

3D位移

在CSS3中3D位移主要包括两种函数translateZ()translate3d()translate3d()函数使一个元素在三维空间移动。

  • 语法:translate3d(tx,ty,tz)了解
    tx:代表横向坐标位移向量的长度;
    ty:代表纵向坐标位移向量的长度;
    tz:代表Z轴位移向量的长度。此值不能是一个百分比值,如果取值为百分比值,将会认为无效值。

  • translateZ()函数的功能是让元素在3D空间沿Z轴进行位移。
    语法:translateZ(t)
    t:指的是Z轴的向量位移长度。

3D旋转

在三维变形中,我们可以让元素在任何轴旋转。为此,CSS3新增三个旋转函数:rotateX()、rotateY()、rotateZ()和rotate3d(x,y,z,a)

  • rotateX(a)
    rotateX()函数指定一个元素围绕X轴旋转,旋转的量被定义为指定的角度;如果值为正值,元素围绕X轴顺时针旋转;反之,如果值为负值,元素围绕X轴逆时针旋转。

  • rotateY(a)
    rotateY()函数指定一个元素围绕Y轴旋转,旋转的量被定义为指定的角度;如果值为正值,元素围绕Y轴顺时针旋转;反之,如果值为负值,元素围绕Y轴逆时针旋转。

  • rotateZ(a)
    rotateZ()函数和其他两个函数功能一样的,区别在于rotateZ()函数指定一个元素围绕Z轴旋转。

CSS3 3D旋转盒子加缩放——WEB(二)_第3张图片

实战:

说一下思路:
1、建立“爷爷”,“爸爸”,“六个儿子(六个面)”。
2、把浏览器初识的margin、padding清0(个人习惯),整体加背景色。
3、给爷爷加景深,设置高度。
4、因为儿子要居中,给爸爸一个相对定位,宽高设置好,并且给爸爸加3d,因为最后旋转的是所有的儿子(假想爸爸抱着6个儿子),再加一个transform: rotateX(0deg) rotateY(0deg); 这样方便在chrome开发者工具调试旋转父级查看效果 。
5、给儿子绝对定位,把六个儿子放在爸爸一个怀抱里(可以把六个面文字图片放进去background-image),居中,具体可查看居中问题的所有方法总结学习。
6、基本工作做好了就开始挪位置了,数据全部写0,方便开发者工具中调试,鼠标选中单个数据滚轮滑动。
CSS3 3D旋转盒子加缩放——WEB(二)_第4张图片
前面:Z轴移动。
背面:Z轴移动,Y轴旋转
右面:Z轴移动,Y轴旋转
左面:Z轴移动,Y轴旋转
上面:X轴移动,Y轴旋转
下面:X轴移动,Y轴旋转

移动的位移是父亲宽高的一半,旋转角度是90度,数据的正负请自己在开发者工具调试感受。

7、基本的box就建立好了。
8、增加缩放:把前面的六个面复制下来加个:hover,角度不变,位移变为两倍。
9、加小盒子inner box:把原来的大盒子和6个面拷贝一份宽高缩小,同样做一个居中处理,所有移动的位移变为大盒子的一半,按需要可以加背景图。
10、最后让他自己动起来,animate配合@keyframes使用,详情可看CSS3动画详情学习。注:在爷爷身上加animate。

大致思路就是这样,附上代码:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>3D</title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			body{
				background-color: #000000;
			}
			.wrap{
				height: 200px;
				margin-top: 150px;
				/* 3、给爷爷加景深 */
				perspective:1000px ;
			}
			
			.wrap .cube{
				/* 2、父级相对定位 */
				position: relative;
				width: 12.5rem;
				height: 12.5rem;
				margin: 0 auto;
				/* 4、爸爸加3d,因为最后旋转的是爸爸 */
				transform-style: preserve-3d;
				animation: box 10s linear infinite;
				/* 5、在chrome开发者工具调试旋转父级查看效果 */
				transform: rotateX(0deg) rotateY(0deg);
				
			}
			
			@keyframes box{
				0%{transform: rotateX(0) rotateY(0) rotateZ(0deg);}
				100%{transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);}
			}
			
			/* big box */
			.wrap .cube div{
				/*/2、自己为绝对定位相对于父级,把6个面盒子全部放进来 */
				position: absolute;
				top: 0;
				left: 0;
				/*/1、相对于父级100% */
				width: 100%;
				height: 100%;
				border: 0px solid black;
				font-size: 1.25rem;
				color: white;
				text-align: center;
				line-height: 200px;
				transition: transform .3s ease-in;
			}
			
			/* 5、调试出的参数 */
			.wrap .cube .front{
				background-image: url(img/7.jpg);
				background-size: auto 100%; 
				transform: translateZ(100px);
			}
			
			.wrap .cube .back{
				background-image: url(img/7.jpg);
				background-size: auto 100%; 
				transform: translateZ(-100px) rotateY(180deg);
			}
			
			.wrap .cube .right{
				background-image: url(img/7.jpg);
				background-size: auto 100%; 
				transform: rotateY(90deg) translateZ(100px);
				
			}
			
			.wrap .cube .left{
				background-image: url(img/7.jpg);
				background-size: auto 100%; 
				transform: rotateY(-90deg) translateZ(100px);
				
			}
			
			.wrap .cube .top{
				background-image: url(img/7.jpg);
				background-size: auto 100%; 
				transform: rotateX(90deg) translateZ(100px);
				
			}
			
			.wrap .cube .bottom{
				background-image: url(img/7.jpg);
				background-size: auto 100%; 
				transform: rotateX(-90deg) translateZ(100px);
				
			}
			
			
		     /* 6、inner box*/
			.wrap .cube i{
				position: absolute;
				top: 50%;
				left: 50%;
				margin-top: -50px;
				margin-left: -50px;
				width: 100px;
				height: 100px;
				border: 1px solid black;
				
			}
			
			.wrap .cube .ifront{
				background-image: url(img/7.jpg);
				background-size: auto 100%; 
				transform: translateZ(50px);
			}
			
			.wrap .cube .iback{
				background-image: url(img/7.jpg);
				background-size: auto 100%; 
				transform: translateZ(-50px) rotateY(180deg);
			}
			
			.wrap .cube .iright{
				background-image: url(img/7.jpg);
				background-size: auto 100%; 
				transform: rotateY(90deg) translateZ(50px);
				
			}
			
			.wrap .cube .ileft{
				background-image: url(img/7.jpg);
				background-size: auto 100%; 
				transform: rotateY(-90deg) translateZ(50px);
				
			}
			
			.wrap .cube .itop{
				background-image: url(img/7.jpg);
				background-size: auto 100%; 
				transform: rotateX(90deg) translateZ(50px);
				
			}
			
			.wrap .cube .ibottom{
				background-image: url(img/7.jpg);
				background-size: auto 100%; 
				transform: rotateX(-90deg) translateZ(50px);
				
			}
			
			
			/* 7、hover box */
			.wrap .cube:hover .front{
				background-image: url(img/1.jpg);
				background-size: auto 100%; 
				transform: translateZ(200px);
			}
			
			.wrap .cube:hover .back{ 
				background-image: url(img/2.jpg);
				background-size: auto 100%; 
				transform: translateZ(-200px) rotateY(180deg);
			}
			
			.wrap .cube:hover .right{
				background-image: url(img/3.jpg);
				background-size: auto 100%; 
				transform: rotateY(90deg) translateZ(200px);
				
			}
			
			.wrap .cube:hover .left{
				background-image: url(img/4.jpg);
				background-size: auto 100%; 
				transform: rotateY(-90deg) translateZ(200px);
				
			}
			
			.wrap .cube:hover .top{
				background-image: url(img/5.jpg);
				background-size: auto 100%; 
				transform: rotateX(90deg) translateZ(200px);
				
			}
			
			.wrap .cube:hover .bottom{
				background-image: url(img/6.jpg);
				background-size: auto 100%; 
				transform: rotateX(-90deg) translateZ(200px);
			}
			
		</style>
	</head>
	<body>
		<div class="wrap">
			<div class="cube">
				<div class="front"></div>
				<div class="back"></div>
				<div class="right"></div>
				<div class="left"></div>
				<div class="top"></div>
				<div class="bottom"></div>
				
				<i class="ifront"></i>
				<i class="iback"></i>
				<i class="iright"></i>
				<i class="ileft"></i>
				<i class="itop"></i>
				<i class="ibottom"></i>
			</div>
	</body>
</html>

然后就实现啦~

附上GitHub地址和图片:
CSS3 3D旋转盒子加缩放——WEB(二)_第5张图片
欢迎评论区轰炸!

你可能感兴趣的:(web)