css动画中，transform是2D，向右平移怎么设置

css中transform的使用

1.对于行内元素是无效的
2.会保留原来的位置,提高盒子的层级 与relative相对定位类似
transform: translate(X,Y)
1.填入具体数值,例如 translate(10px,10px) ,需要填写单位,元素将会向右位移10px,向下位移10px;
其中如果数值为负数,则位移的方向相反
2.填入百分比数字,例如 translate(10%,10%) ,元素将会向右位移 自身元素 的width 10%距离和向下位移 自身元素 的height 10%距离
transform: rotate(X);
需要在X位置填写相对应的旋转角度,并带上单位deg,例子: rotate(90deg)
元素将会默认在自身的垂直水平居中点进行旋转对应的X度
transform-origin: X Y
可以通过改变元素的该属性,导致元素旋转的原点进行改变
1.填入的X Y值为方位名词,例如top\bottom\left
ight
例子: transform-origin: left top; 元素将在元素的左上角为原点进行旋转运动
transform: scale(X);
可以通过改变元素的该属性,导致元素进行X倍的缩放;X为负数时将会产生镜面效果
例子: transform: scale(1.2); 元素将变为原来的1.2倍.
transform连写,如果有发生平移,都需要先写平移属性
例子 transform: translateX(300%) rotate(360deg);
可以在发生transform的元素中设置transition属性
例子: transition: 1s; 代表触发元素发生变化后,变化将于1s内完成

css3translate是什么意思

在CSS3中，translate是一种用于元素变换的CSS属性，它可以改变元素的位置，不影响其在文档流中的位置。translate属性可以应用于2D和3D变换。

在CSS3中，translate属性用于对元素进行平移变换，改变元素在水平和垂直方向上的位置，而不影响其在文档流中的位置。translate属性可以应用于2D和3D变换。
以下是translate属性的常见用法示例：
1、2D平移
.element {  transform: translate(100px, 50px);}
上述示例将.element选择器的元素在水平方向上向右平移100像素，垂直方向上向下平移50像素。
2、3D平移
.element {  transform: translate3d(100px, 50px, 0);}
上述示例将.element选择器的元素在X轴上向右平移100像素，Y轴上向下平移50像素，Z轴上不发生变化。
3、平移指定轴
.element {  transform: translateX(100px);  /* 或 */  transform: translateY(50px);  /* 或 */  transform: translateZ(0);}
上述示例分别使用translateX、translateY和translateZ来对元素进行单个轴向的平移变换。translateX用于水平方向上的平移，translateY用于垂直方向上的平移，translateZ用于3D空间中沿Z轴的平移。
除了上述常见用法，translate属性还可以与其他变换属性结合使用，以实现更复杂的效果。例如：
.element {  transform: translateX(100px) rotate(45deg);}
上述示例将.element选择器的元素在水平方向上向右平移100像素，并绕自身中心顺时针旋转45度。
通过调整translate属性的参数值，可以控制元素在平移变换中的位移量。参数可以是长度值（如像素、百分比等）或关键字（如left、right、top、bottom等），根据具体需求进行调整。
translate属性的值是相对于元素自身的初始位置进行计算的。负值表示相反方向的平移。同时，通过使用过渡（transition）和动画（animation）等技术，可以实现平滑的平移效果。

CSS3的transform属性的用法？

定义和用法
transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。
语法
transform: none|transform-functions;

旋转 div 元素：
div
{
transform:rotate(7deg);
-ms-transform:rotate(7deg); /* IE 9 */
-moz-transform:rotate(7deg); /* Firefox */
-webkit-transform:rotate(7deg); /* Safari 和 Chrome */
-o-transform:rotate(7deg); /* Opera */
}

12.CSS3的Transform详解

==transform==字面上就是变形，改变的意思。在css3中transform主要包括以下几种： 旋转rotate 、 扭曲skew 、 缩放scale 和 移动translate 以及 矩阵变形matrix 。
none:表示不进么变换；表示一个或多个变换函数，以空格分开；换句话说就是我们同时对一个元素进行transform的多种属性操作，例如rotate、scale、translate三种，但这里需要提醒大家的，以往我们叠加效果都是用逗号（“，”）隔开，但transform中使用多个属性时却需要有空格隔开。大家记住了是空格隔开。
1.1 translate(x,y):单位可以是px
1.2单位也可以是百分比，参照物是元素本身
1.3 参数可以是(x,y),x,y轴都位移
1.4 参数(x),设置x轴上得位移
translate([ x,y ]) ：通过矢量[tx, ty]指定一个2D translation，tx 是第一个过渡值参数，ty 是第二个过渡值参数选项。如果未被提供，则ty以 0 作为其值。也就是translate(x,y),它表示对象进行平移，按照设定的x,y参数值,当值为负数时，反方向移动物体，其基点默认为元素 中心点，也可以根据transform-origin进行改变基点。如transform:translate(100px,20px):
[图片上传失败...(image-154e3b-1620550857918)]
2、translateX() ： 通过给定一个X方向上的数目指定一个translate。只向x轴进行移动元素，同样其基点是元素中心点，也可以根据transform-origin改变基点位置。如：transform:translateX(100px):
[图片上传失败...(image-80f009-1620550857918)]
3、translateY() ：通过给定Y方向的数目指定一个translate。只向Y轴进行移动，基点在元素心点，可以通过transform-origin改变基点位置。如：transform:translateY(20px):
[图片上传失败...(image-2ffdd9-1620550857918)]
[图片上传失败...(image-af90fa-1620550857918)]
rotate() ：通过指定的角度参数对原元素指定一个2D rotation（2D 旋转），需先有transform-origin属性的定义。transform-origin定义的是旋转的基点，其中angle是指旋转角度，如果设置的值为正数表示顺时针旋转，如果设置的值为负数，则表示逆时针旋转。如：transform:rotate(30deg):
[图片上传失败...(image-a2befa-1620550857918)]
skew( [, ]) ：X轴Y轴上的skew transformation（斜切变换）。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则值为0，也就是Y轴方向上无斜切。skew是用来对元素进行扭曲变行，第一个参数是水平方向扭曲角度，第二个参数是垂直方向扭曲角度。其中第二个参数是可选参数，如果没有设置第二个参数，那么Y轴为0deg。同样是以元素中心为基点，我们也可以通过transform-origin来改变元素的基点位置。如：transform:skew(30deg,10deg):
[图片上传失败...(image-c4b307-1620550857918)]
skewX() ： 按给定的角度沿X轴指定一个skew transformation（斜切变换）。skewX是使元素以其中心为基点，并在水平方向（X轴）进行扭曲变行，同样可以通过transform-origin来改变元素的基点。如：transform:skewX(30deg)
[图片上传失败...(image-e96057-1620550857918)]
skewY() ： 按给定的角度沿Y轴指定一个skew transformation（斜切变换）。skewY是用来设置元素以其中心为基点并按给定的角度在垂直方向（Y轴）扭曲变形。同样我们可以通过transform-origin来改变元素的基点。如：transform:skewY（10deg）
[图片上传失败...(image-84cb03-1620550857918)]
scale([x, y])：提供执行[sx,sy]缩放矢量的两个参数指定一个2D scale（2D缩放）。如果第二个参数未提供，则取与第一个参数一样的值。scale(X,Y)是用于对元素进行缩放，可以通过transform-origin对元素的基点进行设置，同样基点在元素中心位置；基中X表示水平方向缩放的倍数，Y表示垂直方向的缩放倍数，而Y是一个可选参数，== 如果没有设置Y值，则表示X，Y两个方向的缩放倍数是一样的。并以X为准。== 如：transform:scale(2,1.5):
[图片上传失败...(image-fd2209-1620550857918)]
scaleX() ： 使用 [sx,1] 缩放矢量执行缩放操作，sx为所需参数。scaleX表示元素只在X轴(水平方向)缩放元素，他的默认值是(1,1)，其基点一样是在元素的中心位置，我们同样是通过transform-origin来改变元素的基点。如：transform:scaleX(2):
[图片上传失败...(image-be2d37-1620550857918)]
scaleY() ： 使用 [1,sy] 缩放矢量执行缩放操作，sy为所需参数。scaleY表示元素只在Y轴（垂直方向）缩放元素，其基点同样是在元素中心位置，可以通过transform-origin来改变元素的基点。如transform:scaleY(2):
[图片上传失败...(image-6c61d2-1620550857918)]
[图片上传失败...(image-374ac1-1620550857918)]
matrix(, , , , , ) ： 以一个含六值的(a,b,c,d,e,f) 变换矩阵 的形式指定一个2D变换，相当于直接应用一个[a b c d e f]变换矩阵。就是基于水平方向（X轴）和垂直方向（Y轴）重新定位元素,此属性值使用涉及到数学中的矩阵，我在这里只是简单的说一下CSS3中的transform有这么一个属性值，如果有感兴趣的朋友可以去了解更深层次的martix使用方法，这里就不多说了。
transfrom-origin转换原点
1.一个值：设置x轴原点
2.两个值：设置x轴和y轴的原点
3.默认原点在中心：center,center
4.属性值可以使百分比
5.属性值也可以是x轴为left,center,right,y轴为top,center,bottom
transform-origin(X,Y):用来设置元素的运动的基点（参照点）。默认点是元素的中心点。其中X和Y的值可以是百分值,em,px，其中X也可以是字符参数值left,center,right；Y和X一样除了百分值外还可以设置字符值top,center,bottom，这个看上去有点像我们background-position设置一样；下面我列出他们相对应的写法：
1、top left | left top 等价于 0 0 | 0% 0%
2、top | top center | center top 等价于 50% 0
3、right top | top right 等价于 100% 0
4、left | left center | center left 等价于 0 50% | 0% 50%
5、center | center center 等价于 50% 50%（默认值）
6、right | right center | center right 等价于 100% 50%
7、bottom left | left bottom 等价于 0 100% | 0% 100%
8、bottom | bottom center | center bottom 等价于 50% 100%
9、bottom right | right bottom 等价于 100% 100%
其中 left,center right是水平方向取值，对应的百分值为left=0%;center=50%;right=100%而top center bottom是垂直方向的取值，其中top=0%;center=50%;bottom=100%;如果只取一个值，表示垂直方向值不变，我们分别来看看以下几个实例
(1)transform-origin:(left,top):
[图片上传失败...(image-ed7125-1620550857918)]
(2)transform-origin:right
[图片上传失败...(image-6bf39b-1620550857918)]
(3)transform-origin(25%,75%)
[图片上传失败...(image-cfef52-1620550857918)]
//Mozilla内核浏览器：firefox3.5+-moz-transform: rotate | scale | skew | translate ;//Webkit内核浏览器：Safari and Chrome-webkit-transform: rotate | scale | skew | translate ;//Opera-o-transform: rotate | scale | skew | translate ;//IE9-ms-transform: rotate | scale | skew | translate ;//W3C标准transform: rotate | scale | skew | translate ;
上面列出是不同浏览内核transform的书写规则，如果需要兼容各浏览器的话，以上写法都需要调用。
支持transform浏览器
[图片上传失败...(image-66003f-1620550857918)]
同样的transform在IE9下版本是无法兼容的，之所以有好多朋友说，IE用不了，搞这个做什么？个人认为，CSS3推出来了，他是一门相对前沿的技术，做为Web前端的开发者或者爱好者都有必要了解和掌握的一门新技术，如果要等到所有浏览器兼容，那我们只能对css3说NO，我用不你。因为IE老大是跟不上了，，，，纯属个人观点，不代表任何。还是那句话，感兴趣的朋友跟我一样，不去理会IE，我们继续看下去。

css3动画之如何添加多种变换效果（代码示例）

本篇文章给大家带来的内容是css3动画之如何添加多种变换效果（代码示例）。有一定的参考价值，有需要的朋友可以参考一下，希望对你们有所帮助。
在之前的文章【css3动画之transform属性与transition属性的简单使用】中介绍了添加一种变换效果实现简单动画变换的方法，但是只有一种变换效果的动画太单调了，如何添加多种变换效果？下面我们就给大家介绍添加多种变换效果的方法。
首先我们来看看一个元素多种变换是什么样的？
左侧的框开始为小而绿色的方形角，而右侧的框较大，带有红色边框和圆角。将鼠标悬停在任一框上触发动画，使方框1呈现方框2的外观，反之亦然。
同样，我们仍然只使用HTML和CSS来实现这一目标。如果没有CSS变换，两个框仍然会改变它们的 边框颜色，也可能是边框半径，但它会立即发生，而不是一秒钟动画。
那么这样的效果是如何实现的？
其实很简单，要将多个转换应用于单个元素，只需使用空格一个接一个地列出它们。例：
html代码：
css代码：
#submenu {
width: 100px;
height: 60px;
margin: 100px auto;
background-color: #eee;
border: 2px solid green;
-webkit-transition: 1s ease-in-out;
-moz-transition: 1s ease-in-out;
-o-transition: 1s ease-in-out;
transition: 1s ease-in-out;
}
#submenu:hover {
background-color: #fc3;
-webkit-transform: rotate(360deg) scale(2);
-moz-transform: rotate(360deg) scale(2);
-o-transform: rotate(360deg) scale(2);
-ms-transform: rotate(360deg) scale(2);
transform: rotate(360deg) scale(2);
}请注意，IE10现在不使用转换前缀，但 转换仍然需要-ms-。
这意味着当你将鼠标悬停在方框上时，它将在一秒钟内更改颜色，旋转（rotate）和加倍（scale），如下所示：
说明：
transform属性控制元素的旋转，缩放，移动，倾斜；
transition属性实现元素的过渡效果，让元素从一个状态到另一个状态，正真动起来；
考虑到兼容性，需要使用前缀：-webkit-，-moz-，-o-，-ms-。
总结：

标签：css3 编程语言 前端开发 信息技术 HTML