transition和transform

article/2025/9/19 20:54:33

在这里插入图片描述
transition-property属性指定CSS属性的nametransition效果（transition效果时将会启动指定的CSS属性的变化），默认是all，width和height也可以。
提示:一个转场效果，通常会出现在当用户将鼠标悬停在一个元素上时。
transition-duration 属性规定完成过渡效果需要花费的时间（以秒或毫秒计），默认是0.
transition-delay 属性规定过渡效果何时开始（延迟过渡），值以秒或毫秒计，默认为0
ransition-timing-function属性指定切换效果的速度。此属性允许一个过渡效果，以改变其持续时间的速度。默认值：ease
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div{width: 100px;height: 100px;background: red;transition-property: all/* 过渡属性 */;transition-duration: 1s;/* 过渡时间 */transition-delay: 2s;/* 延迟过渡 */transition-timing-function: ease;/* 规定速度效果的速度曲线 */}div:hover{width: 200px;height: 200px;background: blue;}</style>
</head>
<body><div></div>
</body>
</html>

效果开始
在这里插入图片描述
鼠标移入时

transform位移与缩放
translate位移有translateX、translateY（通常是前面两个）、translateZ（3d）

translate(100px,100px) ;

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box1{width: 300px;height: 300px;border: 1px black solid;margin: 30px auto;}.box2{width: 100px;height: 100px;background: red;transition: 2s;}.box1:hover .box2{ transform: translate(100px,100px) /* transform: translateX(100px); */}</style>
</head>
<body><div class="box1"><div class="box2"></div>></div>
</body>
</html>

开始前
在这里插入图片描述
scale缩放
值是一个比例值，正常大小是1，会已当前元素中心点进行缩放
scaleX、scaleY（通常是前面两个）、scaleZ（3d）
scale（2,2）=scale（2）
前面一个是宽，后面一个是高

 transform: scale(2);

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box1{width: 300px;height: 300px;border: 1px black solid;margin: 30px auto;}.box2{width: 100px;height: 100px;background: red;transition: 2s;}.box1:hover .box2{/* transform: translate(100px,100px) *//* transform: translateX(100px); */transform: scale(2);}</style>
</head>
<body><div class="box1"><div class="box2"></div>></div>
</body>
</html>

rotate旋转
单位是角度deg
正值顺时针，负值逆时针
rotateX（3d）、rotateY（3d）、rotateZ（2d）常用

 transform: rotateZ(-45deg);

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box1{width: 300px;height: 300px;border: 1px black solid;margin: 30px auto;}.box2{width: 100px;height: 100px;background: red;transition: 2s;}.box1:hover .box2{/* transform: translate(100px,100px) *//* transform: translateX(100px); *//* transform: scale(2); */transform: rotateZ(-45deg);}</style>
</head>
<body><div class="box1"><div class="box2"></div>></div>
</body>
</html>

skew斜切
单位也是角度，正值向左倾斜，负值向右倾斜
skewX、skewY

 transform: skew(-30deg,-30deg);

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box1{width: 300px;height: 300px;border: 1px black solid;margin: 30px auto;}.box2{width: 100px;height: 100px;background: red;transition: 2s;}.box1:hover .box2{/* transform: translate(100px,100px) *//* transform: translateX(100px); *//* transform: scale(2); *//* transform: rotateZ(-45deg); */transform: skew(-30deg,-30deg);}</style>
</head>
<body><div class="box1"><div class="box2"></div>></div>
</body>
</html>

transform的注意事项
1、变形操作不会影响到其他元素
2、变形操作只能添加给块元素，但是不能添加给内联元素
3、复合写法，可以添加多个变形的操作，执行是有顺序的，先执行后面的操作，在执行前面的操作，translate会受到rotate、scale、skew的影响

.box2{width: 100px;height: 100px;background: red;transform: translate(100px,0) scale(.5);}/* 先进行缩放 0.5，在位移100px */.box3{width: 100px;height: 100px;background: red;transform: scale(.5) translate(100px,0);}/* 受影响，先移动50px，在缩放0.5 ，如果前面是旋转角度，则先旋转设置的度数*/

transform-origin:基点的位置
transform-Origin属性允许您更改转换元素的位置。2D转换元素可以改变元素的X和Y轴。 3D转换元素，还可以更改元素的Z轴。

transform-origin: x-axis y-axis z-axis;

在这里插入图片描述
也可以用数值

transform-origin:100px 100px;

综合代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box1{width: 100px;height: 100px;background-color: red;}.box2{width: 100px;height: 100px;background: red;transform: translate(100px,0) scale(.5);}/* 先进行缩放 0.5，在位移100px */.box3{width: 100px;height: 100px;background: red;transform: scale(.5) translate(100px,0);}/* 受影响，先移动50px，在缩放0.5 ，如果前面是旋转角度，则先旋转设置的度数*/.box4{width: 100px;height: 100px;background: red;transition: 1s;transform-origin: center center;}.box4:hover{transform: rotate(180deg);}</style>
</head>
<body><div class="box1">1</div><div class="box2">2</div><div class="box3">3</div><div class="box4">4</div>
</body>
</html>

斜切的导航

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>*{margin: 0;padding: 0;}ul{list-style: none;}ul{width: 435px;margin: 30px auto;overflow: hidden;}ul li{float: left;width: 100px;height: 30px;background: red;color: white;line-height: 30px;text-align: center;margin: 0 5px;transform: skewX(-30deg);cursor: pointer;}ul li.active{background: blue;}ui li span{transform: skewX(30deg);display: block;}ul li:first-child{padding-left: 10px;margin-left: -10px;}ui li:last-child{padding-right: 20px;margin-right: -20px;}</style>
</head>
<body><div><ul><li class="active"><span>首页</span></li><li><span>关于我们</span></li><li><span>联系方式</span></li><li><span>招聘信息</span></li></ul></div>
</body>
</html>

在这里插入图片描述