css变形 transform

最新推荐文章于 2025-04-25 21:37:23 发布

zzz19

最新推荐文章于 2025-04-25 21:37:23 发布

阅读量140

点赞数

原文链接：https://www.mk2048.com/blog/blog.php?id=bcjika2ab&title=css%E5%8F%98%E5%BD%A2+transform

版权

transition：过度属性

transition-property 规定设置过度效果的css属性的名称，默认可以写all
transition-duration 规定完成过度效果需要多少秒或毫秒
transition-timing-function: 默认easetransition-delay：延时时间
- ease:逐渐变慢
- linear:匀速
- ease-in:加速
- ease-out:减速
- ease-in-out:先加速在减速
- cubic-bezier：贝塞尔曲线

transitionend：过度完成事件

1 function addEnd(obj,fn){
2     obj.addEventListener('WebkitTransitionEnd',fn,false);
3     obj.addEventListener('transitionend',fn,false);
4 }
5 function removeEnd(obj,fn){
6     obj.removeEventListener('WebkitTransitionEnd',fn,false);
7     obj.removeEventListener('transitionend',fn,false);
8 }

注：1在transition里，如果写了多个，那没改变一次样式，就会触发一次事件
　　2注意重复触发transitionend事件。比如下面重复改变div的y轴位置

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         #nav{position: absolute;left:0;top:0;width: 100px;height: 100px;background: gray;transition: 1s all;}
 8     </style>
 9 </head>
10 <body>
11 <div id="nav"></div>
12 <script>
13     var oHome=document.getElementById("nav");
14     var count = 10;
15     oHome.onclick = function(){
16         count  = 20;
17         oHome.style.transform = 'translate(0,'  count  'px)'
18         addEnd(this,function(){
19             count  = 20;
20             oHome.style.transform = 'translate(0,'  count  'px)'
21         })
22     }
23     function addEnd(obj,fn) {
24         obj.addEventListener('WebkitTransitionEnd',fn,false);
25         obj.addEventListener('transitionend',fn,false);
26     }
27 </script>
28 </body>
29 </html>

View Code

transform：变形

旋转：rotate()：度数
斜切：skew()：度数
- skewX
- skewY　　
缩放：scale()：正数、负数、小数
- scaleX
- scaleY
位移：translate()：css支持的单位都可以
- translateX
- translateY

transform的执行顺序：后写的先执行
- transform: scale(2) rotate(50deg);　先执行旋转，在执行缩放

以上transform的值，也会根据中心点（transform-origin）来改变

练习：时钟demo

练习：导航