1. Transition属性详解
在CSS中，Transition那家伙可是专门用来给元素换装的，让网页变得生活丰富多彩！通过它，你可以搞定各种类型的css属性过渡效果，设定从开始到结束的时长，还能调整其速度。其实很简单，Transition就那么几个小窍门儿：
div{
width: 200px;
height: 200px;
background-color: rgb(255, 156, 156);
transition-property: width,height; //设置要过渡的属性为宽高
}
div:hover{
width: 300px;
height: 300px;
}
– transition-property：指定我们要动的那个属性，就跟挑选周末出去玩一样，你可以挑1个或拉上全家都来一起变化~
– transition-duration：这个属性其实是告诉你，怎么耗时完成过渡效果。
div{
width: 200px;
height: 200px;
background-color: rgb(255, 156, 156);
transition-property: width,height;
transition-duration: 3s,1s;
}
div:hover{
width: 300px;
height: 300px;
}
过渡延迟:这就是为了给过度动作用个前奏，看看它啥时忍不住要跳出来。
咱们直接把这些属性串起来写，这样代码就清爽多！画个动画的话别忘了加Transition属性哈~
div{
width: 200px;
height: 200px;
background-color: rgb(255, 156, 156);
transition-property: width,height;
transition-duration: 3s;
transition-delay: 2s;
}
div:hover{
width: 300px;
height: 300px;
}
2. Transform属性应用
在CSS3里面有个屌炸天的功能叫做Transform！它能让你随心所欲地操控元素移动、旋转甚至放大拉伸，还有倾斜！简单来说，就是这么几个变化：
div{
width: 200px;
height: 200px;
background-color: rgb(255, 156, 156);
transition-property: width,height;
transition-duration: 3s;
transition-timing-function: ease-in;
}
div:hover{
width: 300px;
height: 300px;
}
-挪动（Move）：让元素自由走位，到处晃悠，改变下位置。
-转个身（Rotate）：这个功能能帮你把元素围绕指定的点转上一整圈，那个点就成了旋转的主角儿！
div{
width: 200px;
height: 200px;
background-color: rgb(229, 171, 171);
transition: all 2s linear;
}
div:hover{
width: 300px;
height: 300px;
}
-缩放（Scale）:简单来说，这功能就像魔法师，可以让你的元素变大变小。那么，比如说用scale(2)，就是把东西放大两倍咯~
哇，倾斜功能可以让你的元素随意翻转~设计更有创意！
3. Transition与Transform结合应用
Transitions和Transform搭配在一起，动画特效棒呆了！只要把Transition属性搞定，再用 Transform的移位、旋转、缩放之类的功能，网页互动会瞬间高大上。就说把鼠标放个小东西上，加上这两个特效，它肯定动起来，还能转圈变大小，太炸裂了！
div{
width: 200px;
height: 200px;
background-color: rgb(229, 171, 171);
margin: 100px auto;
transition: all 2s linear;
transform-origin: left bottom;
}
div:hover{
transform: rotateZ(90deg);
}
4. Transform基点设置
说起把Transform变成变身术，你得懂transform-origin这玩意儿。就好比变身的中心，默认为元素正中央。咱们可以用数字或形容词挪动这个点，这样就能更妥当地控制变形效果
div{
width: 200px;
height: 200px;
background-color: rgb(229, 171, 171);
transition: all 2s linear;
}
div:hover{
transform:translate(200px,200px)
}
5. 3D动画效果与透视属性
强大的CSS3可以让你的画板在屏幕上来回转动！只要扭转一下“透视”这个按钮，就可以随意给主体添加下大上小的视觉效果。这样，离你越近的物品看起来就越大，这就是所谓的“透视效果”了，在3D设计里可是关键的一步。
div{
width: 200px;
height: 200px;
background-color: rgb(229, 171, 171);
margin: 100px auto;
transition: all 2s linear;
}
div:hover{
transform: rotateZ(90deg);
}
6.设置子盒子3D效果保持
做三维动画时，transform-style得选“管子”模式，这样才有立体感。不然，默认的“平的”就没效果咯~设成“保留3D”，那你移动视角，虚拟的onmer盒子也会跟著动，效果更好玩儿。嘿嘿。
7.实践案例分析
想知道怎么做个炫酷的转场动画吗？拿出你的鼠标放到网页中的某个小小div上试试看！这个小div会放大旋转，还有透视效果和选定动画起点，这样才能让画面更有层次感。
div{
width: 200px;
height: 200px;
background-color: rgb(229, 171, 171);
transition: all 2s linear;
margin: 100px auto;
transform-origin: top left;
}
div:hover{
transform:scale(2)
}
8.其他高级应用技巧
我们来聊聊怎么利用CSS里的转换（Transition）和变换（Transform）功能提高动画的质量，还教你怎么让它们动起来更顺畅，避免闪屏情况出现！当然，还要考虑到各种浏览器是否支持这些特性。
div{
width: 200px;
height: 200px;
background-color: rgb(229, 171, 171);
transition: all 2s linear;
margin: 100px auto;
}
div:hover{
transform:rotateX(360deg)
}
。
评论0