网上科普有关“css3 翻转和旋转的区别”话题很是火热，小编也是针对css3 翻转和旋转的区别寻找了一些与之相关的一些信息进行分析 ，如果能碰巧解决你现在面临的问题 ，希望能够帮助到您。
css3 翻转和旋转的区别如下：
概述：css3中的transform中有旋转，放缩，倾斜 ，平移的功能 ，分别对应的属性是：rotate，scale ，skew ，translate
1、旋转，利用rotate来实现 ，代码如下：
-webkit-transform:rotate(10deg); 指定浏览器内核为webkit的翻转方式
-moz-transform:rotate(10deg);指定firefox浏览器私有属性
transform:rotate(10deg); 一般浏览器翻转的角度为10弧度
2 、 翻转 ，利用scale来实现，代码如下：
scale本来是放缩的意思 ，原来括弧里面（1 ，1）前者表示X轴，后者表示Y轴 ，当数字大于1时放大 ，大于0并小于1时缩小，负数代表翻转
水平翻转：
-webkit-transform:scale(-1，1); 水平轴为-1 ，代表水平翻转
-moz-transform:scale(-1 ，1); 水平轴为-1，代表水平翻转
transform:scale(-1 ，1);水平轴为-1 ，代表水平翻转
垂直翻转：
-webkit-transform:scale(1，-1); 垂直轴为-1 ，代表垂直翻转
-moz-transform:scale(1 ，-1); 垂直轴为-1，代表垂直翻转
transform:scale(1 ，-1);垂直轴为-1 ，代表垂直翻转
css3系列之transform详解translate
css3中的变形
Chrome和safai需前缀加-webkit-，Foxfire需加前缀-moz-
1,旋转 rotate()
div{
width: 300px;
height: 300px;
transform:rotate(20deg);
}
2,扭曲 skew()
div {
width: 300px;
height: 300px;
transform:skew(45deg,-10deg);
}
3,缩放 scale()
scale(X,Y)使元素水平方向和垂直方向同时缩放（也就是X轴和Y轴同时缩放）
也可以只缩放 x轴 ，或只缩放y轴 。
div {
width: 200px;
height: 200px;
background: orange;
}
.wrapper div:hover {
opacity: .5;
transform: scale(0.8);
}
4,位移 translate()
translate()函数可以将元素向指定的方向移动 ，类似于position中的relative 。
或以简单的理解为，使用translate()函数，可以把元素从原来的位置移动 ，
而不影响在X 、Y轴上的任何Web组件。
5 ，原点 transform-origin
CSS变形进行的旋转、位移、缩放，扭曲等操作都是以元素自己中心位置进行变形。
但很多时候 ，我们可以通过transform-origin来对元素进行原点位置改变 ，使元素
原点不在元素的中心位置，以达到需要的原点位置 。
div {
transform: skew(45deg);
transform-origin:top;
}
6,过渡
div {
width: 200px;
height: 200px;
background: red;
margin: 20px auto;
-webkit-transition-property: all;
transition-property: all; //指定过渡或动态模拟的css属性 （all是指所有）
-webkit-transition-duration:5s;
transition-duration:5s; //指定完成过渡的时间
-webkit-transition-timing-function: linear;
transition-timing-function: linear; //指定过渡的函数 linear/ease/ease-in/ease-out/ease-in-out/cubicbezier(n,n,n,n) n为0-1
-webkit-transition-delay: .18s;
transition-delay:.18s; //指定开始出现的延迟时间
}
div:hover {
width: 400px;
height:400px;
}
7 ，Keyframes被称为关键帧 ，css3中以“@keyframes ”开头，后面紧跟着是动画名称加上一对花括号“{...} ”
@keyframes changecolor{
0%{
background: red;
}
20%{
background:blue;
}
40%{
background:orange;
}
60%{
background:green;
}
80%{
background:yellow;
}
100%{
background: red;
}
}
div {
width: 300px;
height: 200px;
}
div:hover {
animation: changecolor 5s ease-out .2s;
}
等价于
div:hover{
animation-name:changecolor;
animation-duration:5s;
animation-timing-function:ease-out;
animation-delay:1;
animation-iteration-count:infinite;//动画播放次数 整数 。
animation-play-state:paused;//主要用来控制元素动画的播放状态。
animation-direction:alternate;//动画方向 ，normal每次循环向前 ，alternate偶次向前，奇数相反 。
animation-fill-mode: both; //设置动画时间外属性none 、forwards 、backwords和both
}
translate
translate这个参数的 ，是transform 身上的 ，那么它有什么用呢？
其实他的作用很简单，就是平移，参考自己的位置来平移
translate()
translateX()
translateY()
translateZ()
translate3d()
translateX
向X轴平移 ，填正数往右平移 ，填负数，往左平移
translateY
向Y轴平移 ，填正数往下平移 ，填负数，往上平移
translateZ
向Z轴平移 ，这个可能有点难理解 ，想像一个场景，你现在和电脑屏幕的距离 ，这就是Z轴的距离 ，电脑屏幕离你越近，那么translateZ() 里面的值 越大 ， 电脑屏幕离你越远 ， translateZ() 的值就越小 。 所以说，Z 增加，那么这个电脑屏幕 ，离你就越近 ，
下面要用到旋转，rotate ，不懂的话 ，请点击→ css3系列之transform 详解rotate
首先Z 轴是朝向我们的，所以 看不出效果 ，但是 ，我们把它转个身，让Z轴 面对 右边 ，就可以了。
translate() 和 translate3d()
translate 是同时设置 translateX 和 translateY ， 所以里面可以填两个参数， 第一个值 X 第二个 Y
translate3d 是同时设置 translateX ，translateY 和 translateZ 所以里面可以填三个参数
只不过有点不同的是 ， translate 如果第二个参数不填的话，默认是0， 不过translate3d的话 ，人家就不同意你不填了 ，你三个参数，必须都给我填 。
关于“css3 翻转和旋转的区别”这个话题的介绍 ，今天小编就给大家分享完了 ，如果对你有所帮助请保持对本站的关注！
本文来自作者[凌卉]投稿，不代表石号立场，如若转载，请注明出处：https://s0429.com/cshi/202512-2172.html
评论列表（4条）
我是石号的签约作者“凌卉”！
希望本篇文章《css3 翻转和旋转的区别》能对你有所帮助！
本站[石号]内容主要涵盖：国足,欧洲杯,世界杯,篮球,欧冠,亚冠,英超,足球,综合体育
本文概览：网上科普有关“css3 翻转和旋转的区别”话题很是火热，小编也是针对css3 翻转和旋转的区别寻找了一些与之相关的一些信息进行分析，如果能碰巧解决你现在面临的问题，希望能够帮助...