【CSS】变换

空间概念

三维空间坐标 ( X，Y，Z )

透视 ( perspective) 距离 ( 视距 ) d，近大远小，观众面向组件的距离

没有使用 transform-origin 改变元素基点 位置的情况下，transform 进行的 rotate，translate，scale，skew 等操作 都是以元素自己中心位置 进行变化的。transform-origin 并不是 transform 中的属性值，跟其他的 css3 属性一样， 需要在不同的浏览内核中加上相应的前缀 。组合 同时使用多个 转换，综合使用这几个 用法其格式为 transform: translate() rotate() scale(); 变形的 顺序 是 从左到右 依次进行，顺序会影响到转换的效果（先旋转会改变坐标轴方向）

translate ( 平移 )

<style>
	.box{
		margin: 50px 0 0 50px;
		/* 设置容器元素的透视距离（视距），用于创建3D变换效果（近大远小，观众面向组件的距离） */
		perspective: 1000px;
		/* 子元素开启立体空间（flat默认不开启），控制子元素是否开启三维立体环境 */
		transform-style: preserve-3d;
	}

	.translateX,.translateY,.translateZ,.translate3D,
	.translate2D
	{
		width: 200px;height: 200px;color: #0000ff;float: left;
		background-image: url("./day5/xmm.jpg");background-size: cover;
		border-radius: 20px;transition: transform 1.5s; /* 过渡 */
	}

	.clear{
		content: "";
		display: table;
		clear: both;
	}

	.translateX:hover{
		transform: translateX(150px); /* 沿 X 轴方向移动 */
	}
	.translateY:hover{
		transform: translateY(180px); /* 沿 Y 轴方向移动 */
	}
	.translateZ:hover{
		transform: translateZ(-700px); /* 沿 Z 轴方向移动 */
	}
	.translate2D:hover{
		transform: translate(150px,150px); /* 沿 XY交叉 点方向移动 */
	}
	.translate3D:hover{
		transform: translate3d(50px, 50px, 230px); /* 3d的平移效果，用 2d平移 + 缩放 也可达到类似效果 */
	}
</style>
<div class="box clear">
	<!-- X轴正数向右，Y轴正数向下，Z轴正数指向屏幕面前的我 -->
	<div class="translateX">translate平移X</div>
	<div class="translateY">translate平移Y</div>
	<div class="translateZ">translate平移Z</div>
	<div class="translate2D">translate平移2D</div>
	<div class="translate3D">translate平移3D</div>
</div>

效果:

rotate ( 旋转 )

<style>
	.box{
		margin: 50px 0 0 50px;
		/* 设置容器元素的透视距离（视距），用于创建3D变换效果（近大远小，观众面向组件的距离）*/
		perspective: 1000px;
		/* 子元素开启立体空间（flat默认不开启），控制子元素是否开启三维立体环境 */
		transform-style: preserve-3d;
	}

	.rotate3D-X,.rotate3D-Y,.rotate3D-Z,.rotate3D,
	.rotate3D-X-jzd,.rotate3D-Y-jzd,.rotate3D-Z-jzd
	{
		width: 170px;height: 170px;color: #0000ff;border-radius: 20px;
		background-image: url("./day5/xmm.jpg");background-size: cover;
		float: left;transition: transform 1.5s; /* 过渡 */
		transform: rotate(0deg); /* 初始状态下不旋转 */
	}

	.clear{
		content: "";
		display: table;
		clear: both;
	}

	/* 以元素的中心点为基准点进行变形，transform-origin属性，可以改变变形的基准点（left、right、center、top、bottom）*/

	.rotate3D-X:hover{
		transform: rotatex(-180deg);  /* 绕 X 轴旋转 180 度 */
	}
	.rotate3D-Y:hover{
		transform: rotateY(180deg);  /* 绕 Y 轴旋转 180 度 */
	}
	.rotate3D-Z:hover{
		transform: rotateZ(180deg);  /* 绕 Z 轴旋转 180 度 */
	}
	.rotate3D:hover{
		transform: rotate3d(1, 1, 0, 180deg);  /* 沿着自定义轴 (X, Y, Z) 旋转 180 度 */
	}

	.rotate3D-X-jzd{
		transform-origin: bottom; /* 改变 X 轴基准点 */
	}
	.rotate3D-X-jzd:hover{
		transform: rotatex(-180deg);  /* 绕 X 轴旋转 180 度 */
	}

	.rotate3D-Y-jzd{
		transform-origin: right; /* 改变 Y 轴基准点 */
	}
	.rotate3D-Y-jzd:hover{
		transform: rotateY(-180deg);  /* 绕 Y 轴旋转 180 度 */
	}

	.rotate3D-Z-jzd{
		transform-origin: right bottom; /* 改变 Z 轴基准点 */
	}
	.rotate3D-Z-jzd:hover{
		transform: rotateZ(180deg);  /* 绕 Z 轴旋转 180 度 */
	}
</style>
<div class="box clear">
	<!-- 正角度为顺时针，负角度为逆时针（ Y轴从下往上看，X轴从右往左看，Z轴正视前方看） -->
	<div class="rotate3D-X">rotate旋转3D-X</div>
	<div class="rotate3D-Y">rotate旋转3D-Y</div>
	<div class="rotate3D-Z">rotate旋转3D-Z</div>
	<div class="rotate3D">rotate旋转3D</div>
	<div class="rotate3D-X-jzd">rotate旋转3D-X不同基准点</div>
	<div class="rotate3D-Y-jzd">rotate旋转3D-Y不同基准点</div>
	<div class="rotate3D-Z-jzd">rotate旋转3D-Z不同基准点</div>
</div>

效果:

scale ( 缩放 )

<style>
	.box{
		margin: 50px 0 0 50px;
		/* 设置容器元素的透视距离（视距），用于创建3D变换效果（近大远小，观众面向组件的距离） */
		perspective: 1000px;
		/* 子元素开启立体空间（flat默认不开启），控制子元素是否开启三维立体环境 */
		transform-style: preserve-3d;
	}

	.scaleX,.scaleY,.scaleZ,.scale3D,.scale2D
	{
		width: 200px;height: 200px;color: #0000ff;border-radius: 20px;
		background-image: url("./day5/xmm.jpg");background-size: cover;
		float: left;transition: transform 1.5s; /* 过渡 */
	}

	.clear{
		content: "";
		display: table;
		clear: both;
	}

	/* 因为Z轴是指向观众的，在缩放条件下，Z方向它变大和变小我们都不易观察到效果。所以3d的缩放效果配合3d旋转效果rotate展示 */

	.scaleX:hover{
		transform: scaleX(1.5); /* 在 X 轴方向缩放 1.5 倍 */
	}
	.scaleY:hover{
		transform: scaleY(1.5); /* 在 Y 轴方向缩放 1.5 倍 */
	}
	.scaleZ:hover{
		transform: scaleZ(5) rotateY(45deg); /* 在 Z 轴方向缩放 1.5 倍 */
	}
	.scale2D:hover{
		transform: scale(1.5,1.5); /* 在 XY 轴方向分别缩放 1.5 1.5 倍 */
	}
	.scale3D:hover{
		transform: scale3d(1.5,1.5,1.5) rotate3d(0.5,0.5,0,45deg); /* 在 XYZ 轴方向分别缩放 1.5 1.7 1.5 倍 */
	}
</style>
<div class="box clear">
	<!-- 定义倍数缩放：  >1 放大    <1 缩小    默认值是 1 (为负值表示先翻转后缩放 ) -->
	<div class="scaleX">scale缩放X</div>
	<div class="scaleY">scale缩放Y</div>
	<div class="scaleZ">scale缩放Z</div>
	<div class="scale2D">scale缩放2D</div>
	<div class="scale3D">scale缩放3D</div>
</div>

效果:

skew ( 倾斜 )

<style>
	.box{
		margin: 50px 0 0 50px;
		/* 设置容器元素的透视距离（视距），用于创建3D变换效果（近大远小，观众面向组件的距离） */
		perspective: 1000px;
		/* 子元素开启立体空间（flat默认不开启），控制子元素是否开启三维立体环境 */
		transform-style: preserve-3d;
	}

	.skewX-z,.skewX-f,.skewY-z,.skewY-f,
	.skewXY
	{
		width: 200px;height: 200px;color: #0000ff;border-radius: 20px;
		background-image: url("./day5/xmm.jpg");background-size: cover;
		float: left;transition: transform 1.5s; /* 过渡 */
	}

	.clear{
		content: "";
		display: table;
		clear: both;
	}

	.skewX-z:hover{
		transform: skewX(30deg);
	}
	.skewX-f:hover{
		transform: skewX(-30deg);
	}
	.skewY-z:hover{
		transform: skewY(30deg);
	}
	.skewY-f:hover{
		transform: skewY(-30deg);
	}
	.skewXY:hover{
		transform: skew(-30deg,30deg);
	}
</style>
<div class="box clear">
	<div class="skewX-z">skew扭曲X正角度</div>
	<div class="skewX-f">skew扭曲X负角度</div>
	<div class="skewY-z">skew扭曲Y正角度</div>
	<div class="skewY-f">skew扭曲Y负角度</div>
	<div class="skewXY">skew扭曲XY</div>
</div>

效果:

案例（ 六面骰子、旋转照片）

六面骰子

<style>
	body{
		/* 设置容器元素的透视距离（视距），用于创建3D变换效果（方便观察物体在Z轴上的位置变化）*/
		perspective: 9000px;
	}

	.box{
		margin: 180px 150px;width: 150px;height: 150px;
		/* 子元素开启立体空间 */
		transform-style: preserve-3d;
		/* 定位 */
		position: relative;
		/* 调用动画 */
		animation: faceChange 15s linear infinite;
	}

	.one,.two,.three,.four,.five,.six
	{
		width: 150px;height: 150px;line-height: 150px;
		color: rgb(59, 59, 59);text-align: center;
		border-radius: 20px;font-size: 30px;
		/* 相对于父元素定位 */
		position: absolute;
	}

	.one{
		background-color: rgba(250, 4, 4, 0.5);
	}
	.two{
		background-color: rgba(0, 4, 255, 0.5);
		transform-origin: right;
		transform: translateX(-150px) rotateY(-90deg);
	}
	.three{
		background-color: rgba(15, 15, 16, 0.5);
		transform-origin: bottom;
		transform: translateY(-150px) rotateX(90deg);
	}
	.four{
		background-color: rgba(6, 246, 226, 0.5);
		transform-origin: top;
		transform: translateY(150px) rotateX(-90deg);
	}
	.five{
		background-color: rgba(245, 225, 2, 0.5);
		transform: translateZ(-150px) rotateY(180deg);
	}
	.six{
		background-color: rgba(211, 76, 241, 0.5);
		transform-origin: left;
		transform: translateX(150px) rotateY(90deg);
	}

	/* 动画 */
	@keyframes faceChange {
		from{
			transform: rotateY(0deg) rotateX(0deg) rotateZ(0deg);
		}to{
			 transform: rotateY(720deg) rotateX(720deg) rotateZ(720deg);
		 }
	}

	/* 移入效果 */
	.box:hover .one{
		transform: translateZ(50px);
	}
	.box:hover .two{
		left: -50px;
	}
	.box:hover .three{
		top: -50px;
	}
	.box:hover .four{
		top: 50px;
	}
	.box:hover .five{
		transform: translateZ(-200px);
	}
	.box:hover .six{
		left: 50px;
	}
</style>
<div class="box">
	<div class="one">1</div>
	<div class="two">2</div>
	<div class="three">3</div>
	<div class="four">4</div>
	<div class="five">5</div>
	<div class="six">6</div>
</div>

效果:

旋转照片

<style>
	.bigBox{
		perspective: 5000px;
		width: 800px;
		height: 300px;
		position: relative;
		transform-style: preserve-3d;
		transform: rotateX(0deg);
		transition: transform 1s linear;
	}
	.box{
		position: absolute;
		width: 200px;
		height: 100px;
		left: calc(50% - 100px);
		top: calc(50% - 50px);
		transform-style: preserve-3d;
		animation: run 15s linear infinite; 
	}
	.img{
		position: absolute;
		width: 200px;
		height: 100px;
		background-size: cover;
	}

	/* 因为先旋转了之后自身的坐标轴也会随之转动，所以不同的角度，移出相同的距离就刚好是个圆（由中心向四周散发） */
	.img:nth-of-type(1){
		background-image: url('./day5/xmm.jpg');
		transform: translateZ(350px);
	}
	.img:nth-of-type(2){
		background-image: url('./day5/dlam.jpg');
		transform: rotateY(36deg) translateZ(350px);
	}
	.img:nth-of-type(3){
		background-image: url('./day5/lyf.jpg');
		transform: rotateY(72deg) translateZ(350px);
	}
	.img:nth-of-type(4){
		background-image: url('./day5/myy.jpg');
		transform: rotateY(108deg) translateZ(350px);
	}
	.img:nth-of-type(5){
		background-image: url('./day5/mhw.png');
		transform: rotateY(144deg) translateZ(350px);
	}
	.img:nth-of-type(6){
		background-image: url('./day5/gtl.jpg');
		transform: rotateY(180deg) translateZ(350px);
	}
	.img:nth-of-type(7){
		background-image: url('./day5/ddsm.jpg');
		transform: rotateY(216deg) translateZ(350px);
	}
	.img:nth-of-type(8){
		background-image: url('./day5/btxd.jpeg');
		transform: rotateY(252deg) translateZ(350px);
	}
	.img:nth-of-type(9){
		background-image: url('./day5/gtl.jpg');
		transform: rotateY(288deg) translateZ(350px);
	}
	.img:nth-of-type(10){
		background-image: url('./day5/czmh.jpg');
		transform: rotateY(324deg) translateZ(350px);
	}

	/*这里我们要它旋转360度，那么就不用那么麻烦写关键帧了。开始0  结束360，然后循环即可*/
	@keyframes run{
		0%{
			transform: rotateY(0deg);
		}
		100%{
			transform: rotateY(360deg);
		}
	}

	.bigBox:hover{
		transform: rotateX(-15deg);
	}
</style>
<div class="bigBox">
	<div class="box">
		<div class="img"></div>
		<div class="img"></div>
		<div class="img"></div>
		<div class="img"></div>
		<div class="img"></div>
		<div class="img"></div>
		<div class="img"></div>
		<div class="img"></div>
		<div class="img"></div>
		<div class="img"></div>
	</div>
</div>

效果: