- 空间概念
- 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; /*animation linear是匀速运动，infinite是无限循环*/
transform: rotateX(0deg);
}
.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>
效果:
