##CSS 2D 转换##

Posted 2022-01-05 html-he-css

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了##CSS 2D 转换##相关的知识，希望对你有一定的参考价值。

通过CSS 2D转换，我们能够对元素进行移动、缩放、转动、拉长或拉伸。

<br>2D转换一共五个属性:transfrom=>

translate(X轴数值px，Y轴数值px):元素从其当前位置移动，根据给定的x坐标和y坐标位置参数，将元素移动到新的位置

<br>rotate(数值deg):元素顺时针旋转给定的角度，允许负值，元素将逆时针旋转。

<br>scale(宽度数值，高度数值):元素的尺寸会增加或减少，根据给定的宽度和高度参数。

<br>skew(X数值deg，Y数值deg):元素翻转给定的角度，根据给定的X轴和Y轴参数，将元素围绕着X,Y轴翻转。

<br>matrix(n,n,n,n,n,n):可以设定所有的数值，不建议使用，容易混乱。

##CSS 3D转换##

3D转换，将比2D转换X,Y多出一个Z轴。

注：Opera 仍然不支持 3D 转换（它只支持 2D 转换）。

<br>3D转换相应的属性=>

<br>transfrom-origin:(X轴数值，Y轴数值)改变元素被转换的位置，XY交叉部分定位被转换的位置，元素将依照这个位置进行变化.

<br>transfrom-style:规定被嵌套元素如何在3D空间中显示。

<br>perspective-origin:规定 3D 元素的底部位置。

<br>perspective-visibility:定义元素在不面对屏幕时是否可见=>

<br>（1）visible:默认，背面可见，类似透明。

<br>（2）hidden:背面不可见。

##过渡##

通过添加过渡效果，我们可以把一个元素从一种样式变成另外一种样式。

<br>初始属性transition: 需要变化的位置（也可以设置全部all）时间

<br>注：如果不设定时长，则不会有过渡效果，因为默认值为0。

<br>初始属性(背景颜色、边框大小等)+transition=>初始属性:hover背景颜色、边框大小等

<br>注：鼠标移除元素时，它会逐渐变回原样。

###过渡属性###

transition:简写属性，用于在一个属性中设置四个过渡属性。

<br>transition-property:规定应用过渡的 CSS 属性的名称。

<br>transition-duration:定义过渡效果花费的时间。默认是 0。

<br>transition-timing-function:规定过渡效果的时间曲线。默认是 "ease"=>

<br>(1)ease:渐快、匀速、减速

<br>(2)ease-in:渐快、匀速

<br>(3)ease-out:匀速、减速

<br>(4)ease-in-out:和ease类似，但比ease的加速增幅更大

<br>(5)linear:全程匀速

<br>transition-delay:规定过渡效果何时开始。默认是 0,直接开始。

<br>注：这些都将写在初始元素中。

##动画##

书写方式：

<br>@keyframes 名字在一定时间的时候的样式，用%后跟要求显示

<br>@keyframes用于创建动画

<br>注：0%（或form）是动画的开始，100%（或to）是动画的完成。

<br>注2：@keyframes 名字，必须写在要求元素前，否色无效。

<br>@keyframes对应的元素中可以设定的标签=>

<br>animation:所有动画属性的简写属性，除了 animation-play-state 属性

<br>animation-name:规定 @keyframes 动画的名称。

<br>animation-duration:规定动画完成一个周期所花费的秒或毫秒。默认是 0。

<br>animation-timing-function:规定动画的速度曲线。默认是 "ease"。

<br>animation-delay:规定动画何时开始。默认是 0。

<br>animation-iteration-count:规定动画被播放的次数。默认是 1。

<br>animation-direction:规定动画是否在下一周期逆向地播放。默认是 "normal"。

<br>animation-play-state:规定动画是否正在运行或暂停。默认是 "running"。

<br>animation-fill-mode:规定对象动画时间之外的状态。

光说估计大家也不懂，我发个例子吧

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

.big

width: 200px;

height: 200px;

border-radius: 50%;

background: red;

margin: 0 auto;

margin-top: 200px;

display: flex;

text-align: center;

align-items: center;

@keyframes wo

0%transform: rotate(45deg)

25%transform: rotate(135deg)

50%transform: rotate(215deg)

75%transform: rotate(305deg)

100%transform: rotate(395deg)

.wu

width: 300px;

height: 300px;

position: absolute;

margin-left: 530px;

margin-top: -250px;

transform: rotate(45deg);

animation-name: wo;

animation-duration: 4s;

animation-iteration-count: infinite;

.mix

width: 50px;

height: 50px;

border-radius: 50%;

background: blue;

.tx

display: flex;

width: 300px;

height: 150px;

@keyframes hf

0%transform: scale(1.5,1.5)

50%transform: scale(1,1)

100%transform: scale(1.5,1.5)

width: 150px;

height: 150px;

animation-name: hf;

animation-duration: 1s;

animation-iteration-count: infinite;

width: 150px;

height: 150px;

animation-name: hf;

animation-duration: 1s;

animation-iteration-count: infinite;

width: 150px;

height: 150px;

animation-name: hf;

animation-duration: 1s;

animation-iteration-count: infinite;

width: 150px;

height: 150px;

animation-name: hf;

animation-duration: 1s;

animation-iteration-count: infinite;

float: left;

float: right;

float: left;

margin-top: 100px;

float: right;

margin-top: 100px;

</style>

</head>

<body>

</div>

</div>

</body>

</html>

以上只是一个简单的例子，大家可以多多尝试各种元素组合书写。

以上是关于##CSS 2D 转换##的主要内容，如果未能解决你的问题，请参考以下文章