过渡、斜切和2D移动、旋转、缩放。

布满荆棘的人生 2023-08-17 17:02 50阅读 0赞

<style>

.box\{

width: 200px;

height: 200px;

background-color: red;

/\* transition: all 1s; \*/

.box:hover\{

width: 600px;

height: 600px;

background-color: lime;

transition: all 1s;

/\*

语法： transition： all 1s； all表示任何属性发生变化时都执行 1s过渡持续时间

注:过渡写在鼠标点击状态时只在移入时执行一次，离开时不会执行

写在盒子属性内移入移出都会执行，执行了两次

过渡: 从一个状态到另外一个状态的过程

第一个值: 过渡的属性 all (所有的属性)

第二个值: 过渡的持续时间 单位是s或者ms 1s = 1000ms

第三个值: 过渡的延迟时间 单位是s或者ms 默认是0s

第四个值: 过渡的速度曲线 ease 默认值 荡秋千 linear 匀速

\*/

/\* 过渡的单一属性\*/

/\* 过渡的属性 \*/

transition-property: all;

/\* 过渡的持续时间 \*/

transition-duration: 1s;

/\* 过渡的延迟时间 \*/

transition-delay: 1s;

/\* 过渡的曲线 \*/

transition-timing-function: ease;

</style>

<style>

.box4\{

width: 200px;

height: 200px;

background-color: blue;

margin: 200px auto;

transition: all 1s;

/\*

斜切:

1. 沿着那个轴斜切 那个轴保持不动

2. 另外一个轴朝这个轴倾斜对应的角度

\*/

.box4:hover\{

transform: skew(45deg,45deg);

</style>

<style>

.box1\{

width: 200px;

height: 200px;

background-color: lime;

transform: translate(500px,500px);

/\* 取值：

translateX() 沿着X轴水平移动 正值向右 负值向左

translateY() 沿着Y轴垂直移动 正值向下 负值向上

translate(x,y) 同时沿着X和Y轴移动 (斜着移动)

里面既可以写像素 也可以写百分比(参照的是自身的宽高)

\*/

</style>

<style>

.box2\{

width: 200px;

height: 200px;

background-color: black;

transform: rotate(45deg);

margin: 0 auto;

/\*

旋转: rotate() 括号里面写的是旋转的角度 deg

正值顺时针

负值逆时针

\*/

</style>

<style>

.box3 \{

width: 200px;

height: 200px;

background-color:yellow;

transform: scale(0.5);

/\*

transform: scale()

取值:

scale(倍数) 括号里面只有一个值 代表整体缩放

scaleX(倍数) 水平缩放

scaleY(倍数) 垂直缩放

\*/

</style>

<style>

.box5\{

width: 200px;

height: 200px;

background-color: purple;

transform-origin: top;

transition: all 1s;

/\*

transform-origin

控制2D转换的中心点

1. 方位名词: left right top bottom center

2. 像素: 以盒子的左上角为坐标原点 水平向右 垂直向下 构建一个坐标系

\*/

.box5:hover\{

transform: scale(3);

</style>

转载于:https://www.cnblogs.com/lzfj/p/11449264.html

过渡、斜切和2D移动、旋转、缩放。

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关五角星持续放缩、旋转移动、碰撞反弹

相关过渡、斜切和2D移动、旋转、缩放。

相关 Cesium模型旋转、缩放

相关 CSS变形平移旋转缩放

相关 Cocos2d-js 实现多触点缩放与旋转

相关 IOS 基本动画（旋转、移动、闪烁、缩放等）

相关 OSG学习：移动/缩放/旋转模型

相关交互式QGraphicsView（平移/缩放/旋转）

相关交互式 QGraphicsView（平移/缩放/旋转）

相关 LayaAir Sprite 旋转缩放