transition和transform
2021/8/18 23:36:59
本文主要是介绍transition和transform，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！
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>
这篇关于transition和transform的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
- 2024-05-15鸿蒙生态设备数量超8亿台
- 2024-05-13TiDB + ES：转转业财系统亿级数据存储优化实践
- 2024-05-09“2024鸿蒙零基础快速实战-仿抖音App开发（ArkTS版）”实战课程已上线
- 2024-05-09聊聊如何通过arthas-tunnel-server来远程管理所有需要arthas监控的应用
- 2024-05-09log4j2这么配就对了
- 2024-05-09nginx修改Content-Type
- 2024-05-09Redis多数据源，看这篇就够了
- 2024-05-09Google Chrome驱动程序 124.0.6367.62（正式版本）去哪下载？
- 2024-05-09有没有大佬知道这种数据应该怎么抓取呀？
- 2024-05-09这种运行结果里的10.100000001，怎么能最快改成10.1？
