22.变形:平移、旋转与缩放
变形:平移、旋转与缩放
变形就是指通过 css 来改变元素的形状或位置
变形不会影响到页面的布局
transform
用来设置元素的变形效果
1、平移
注意:这里的x y z轴是以图片正面为准,图片旋转x y z轴也跟着旋转。且图片的中点为坐标轴零点!
translateX()
沿着由方向平移translateY()
沿着 y 轴方向平移translateZ()
沿着 z 轴方向平移平移元素
百分比是相对于自身计算的
几种水平垂直双方向居中的方式对比
-
绝对定位的方式
/* 这种居中方式,只适用于元素的大小确定 */ position: absolute; top: 0; left: 0; bottom: 0; right: 0; margin: auto;
-
table-cell
的方式/* table-cell的方式具有一定局限性 */ display: table-cell; vertical-align: middle; text-align: center;
-
transform
的方式/* transform变形平移的方式 */ position: absolute; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%);
浮出效果
div {
float: left;
width: 200px;
height: 300px;
background-color: silver;
margin: 100px 50px auto 50px;
transition: all 0.3s;
}
div:hover {
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
transform: translateY(-5px);
}
浮出效果遇到的问题
当我们鼠标触发浮块底部时出现闪烁跳动。
问题分析:
出现这种情况是应为鼠标在浮块范围内触发上移
后鼠标已经不在滑块范围之内了
,此时鼠标再次移动,滑块的hover
检测不到被触发,滑块要回到原来位置,在滑块回归的时候又被鼠标碰到触发hover
再次上移,依次往复出现闪烁反复跳跃。
解决方法:
我们可以在滑块外部套一个盒子,盒子的位置固定不变,把hover
绑定在外部盒子上,这样我们就不用考虑滑块被频繁触发的问题了。
代码:
/* 外部盒子 */
.box3-wrapper {
width: 200px;
height: 250px;
background-color: rgba(44, 5, 236, 0.1);
}
/* 滑块 */
.box3 {
width: 200px;
height: 250px;
background-color: rgb(255, 0, 204);
}
/* 外部盒子绑定hover */
.box3-wrapper:hover .box3 {
transform: translateY(-100px);
box-shadow: 0 2px 3px rgba(0, 0, 0, .8);
}
</style>
</head>
<body>
<div class="box3-wrapper">
<div class="box3"></div>
</div>
</body>
效果:
2、Z 轴平移
z 轴平移,调整元素在 z 轴的位置,正常情况就是调整元素和人眼之间的距离,距离越大,元素离人越近
z 轴平移属于立体效果(近大远小),默认情况下网页是不支持透视,如果需要看见效果必须要设置网页的视距
透视效果
<style>
body {
/* 设置当前网页的视距为800px,人眼到网页的距离 */
perspective: 800px;
border: 2px solid red;
}
.box1 {
width: 150px;
height: 150px;
background-color: orchid;
margin: 200px auto;
}
body:hover .box1 {
transform: translateZ(400px);
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
3、旋转
注意:这里的x y z轴是以图片正面为准,图片旋转x y z轴也跟着旋转。且图片的中点为坐标轴零点!
通过旋转可以使元素沿着 x、y 或 z 旋转指定的角度,必须设置视距perspective:
rotateX()
rotateY()
rotateZ()
设置图像背面是否显示backface-visibility:
visuble
默认,显示hidden
隐藏
/* 1 turn 一圈
180deg 180° */
/* transform: rotateY(0.5turn); */
transform: rotateY(180deg);
transform: rotateY(360deg) rotateX(60deg);
边移动,边翻转(翻转的基线一直在图片中线上)
transform: translateX(180px) rotateY(360deg);
变翻转,边移动(翻转的基线不固定)
transform: rotateY(360deg) translateX(180px);
组合很多可以自己尝试
4、缩放
对元素进行缩放的函数(.5缩小一半 ,2放大两倍)
scalex()
水平方向缩放scaleY()
垂直方向缩放scale()
双方向的缩放
变形原点transform-orign:
(变形的起始位置)
center
中点, 默认50% 50%
百分比定位20px 20px
数值定位
.box {
height: 200px;
width: 200px;
background-color: #bfa;
margin: 200px auto;
transition: 2s;
}
.box:hover {
/* transform: scaleX(2); */
/* transform: scaleY(2); */
transform: scale(2);
/* 变形的原点 */
transform-origin: 0 0;
}
5、关于图片旋转后方向
- 旋转前
- 旋转后(沿y轴旋转±90°后再沿z轴平移
xxxpx
后的结果图)
6、实战
鸭子表
html 代码
<div class="clock">
<div class="hour-wrapper">
<div class="hour"></div>
</div>
<div class="minute-wrapper">
<div class="minute"></div>
</div>
<div class="second-wrapper">
<div class="second"></div>
</div>
</div>
css 代码
.clock {
width: 500px;
height: 500px;
background-image: url("assets/鸭子表/clock.png");
background-image: url("assets/鸭子表/clock_duck.jpg");
background-size: cover;
margin: 100px auto;
position: relative;
}
.clock > div {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
.clock > div > div {
height: 50%;
margin: 0 auto;
}
/* 时针 */
.hour-wrapper {
height: 60%;
width: 60%;
animation: clock-run 720s infinite;
}
.hour {
width: 8px;
background-color: black;
}
/* 分针 */
.minute-wrapper {
height: 75%;
width: 75%;
animation: clock-run 60s steps(60) infinite;
}
.minute {
width: 4px;
background-color: black;
}
/* 秒针 */
.second-wrapper {
height: 90%;
width: 90%;
animation: clock-run 1s steps(60) infinite;
}
.second {
width: 2px;
background-color: red;
}
@keyframes clock-run {
from {
transform: rotateZ(0);
}
to {
transform: rotateZ(360deg);
}
}
复仇者联盟
html 代码
<div class="cube">
<div class="surface1"></div>
<div class="surface2"></div>
<div class="surface3"></div>
<div class="surface4"></div>
<div class="surface5"></div>
<div class="surface6"></div>
</div>
css 代码
body {
perspective: 800px;
}
.cube {
height: 200px;
width: 200px;
margin: 200px auto;
position: relative;
/* 设置3d变形效果 */
transform-style: preserve-3d;
animation: cube-rotate 12s infinite linear;
}
.cube div {
height: 200px;
width: 200px;
background-size: cover;
position: absolute;
top: 0;
left: 0;
/* 为元素设置透明效果 */
opacity: 0.85;
}
.surface1 {
background-image: url("/assets/复仇者联盟/1.jpg");
transform: translateX(-100px) rotateY(90deg);
}
.surface2 {
background-image: url("/assets/复仇者联盟/2.jpg");
transform: translateX(100px) rotateY(90deg);
}
.surface3 {
background-image: url("/assets/复仇者联盟/3.jpg");
transform: translateY(-100px) rotateX(90deg);
}
.surface4 {
background-image: url("/assets/复仇者联盟/4.jpg");
transform: translateY(100px) rotateX(90deg);
}
.surface5 {
background-image: url("/assets/复仇者联盟/5.jpg");
transform: translateZ(-100px);
}
.surface6 {
background-image: url("/assets/复仇者联盟/6.jpg");
transform: translateZ(100px);
}
@keyframes cube-rotate {
from {
transform: rotateX(0) rotateY(0) rotateZ(0);
}
to {
transform: rotateX(1turn) rotateY(2turn) rotateZ(3turn);
}
}
7.遇到的问题
问题一
为什么不是一个方方正正的立方体呢?
问题分析:
如下代码中,视距
开在了立方体模块的根元素
上了,导致出错。
.cube {
position: relative;
width: 350px;
height: 350px;
margin: 300px auto;
/* 开启视距 */
perspective: 1000px;
/* 开启3D模式 */
transform-style: preserve-3d;
/* 指定一个倾斜方向 */
/* transform: rotateX(45deg) rotatez(45deg); */
/* 设置动画 */
animation: run 4s infinite linear;
}
问题解决:
通常情况下视距
要开在html
元素中的,不过2022年已经不可以了。现在要开在body
元素中!
.body {
/* 开启视距 */
perspective: 1000px;
}
.cube {
position: relative;
width: 300px;
height: 300px;
margin: 300px auto;
/* 开启3D模式 */
transform-style: preserve-3d;
/* 指定一个倾斜方向 */
/* transform: rotateX(45deg) rotatez(45deg); */
/* 设置动画 */
animation: run 4s infinite linear;
}
效果:
问题二
仔细看问题一最后的效果图,图片与图片链接的地方会有明显的缝隙。
问题分析:
Q:为什么图片会有缝隙?
A:图片属于替换元素,特点与文本一致,也有自己的基线,默认也是基线对齐。而基线位置不在最底部,所以会出现缝隙。
在第13篇文章文本垂直对齐那一节有详细介绍。
解决方法:
明显默认情况下,图片底部有一定缝隙,我们稍作修改,给 img 元素添加vertical-align
属性值
/* 只要不是基线对齐,就能消除底部缝隙 */
vertical-align: top;
vertical-align: bottom;
vertical-align: middle;
CSS代码
.cube img {
width: 300px;
height: 300px;
/* 修改图片对齐方式,去掉图片间的缝隙 */
vertical-align: top;
}
效果: