东莞疫情最新状况今天_linux软件开发工具_关键词推广计划_seo技术外包乐云践新专家

空间概念
translate ( 平移 )
rotate ( 旋转 )
scale ( 缩放 )
skew ( 倾斜 )
案例（六面骰子、旋转照片）

空间概念

三维空间坐标 ( 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>