<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 2D转换 -->
<!-- 2D偏移translate -->
<!-- transform: translate(x, y); -->
<!-- transform: translate(50%, 50%);相对于自身的宽高偏移-->
<!-- transform: translate(x, y);对于行内元素无效 对其他元素无影响 -->
<!-- transform: translate(50px); 默认50px是对于x轴旋转的 -->
<!-- transform: translateX(20px);-->
<!-- transform: translateY(20px); -->
<!-- 2D旋转rotate -->
<!-- transform: rotate(-45deg);时逆针旋转 -->
<!-- transform: rotate(.5turn);半圈--180deg-->
<!-- 2D转换中心 -->
<!-- transform-origin: x y; 转换中心点-->
<!-- transform-origin: 0 0;左上角 -->
<!-- transform-origin: center center;默认转换中心点 -->
<!-- transform-origin: 50% 50%;默认转换中心点 -->
<!-- transform-origin: left bottom; -->
<!-- transform-origin: 50px 50px; -->
<!-- origin可给rotate设置旋转中心点,translate上不明显-->
<!-- 2D缩放scale -->
<!-- transform: scale(x, y); x, y不带单位 -->
<!-- transform: scale(2); width and height scale in same time -->
<!-- transform: scale(left, bottom); scale at left and bottom -->
<!-- transform: scale(bottom); scale at bottom and center-->
<!-- scale将会缩放父级盒子里面所有的内容 -->
<!-- 2D综合写法 -->
<!-- transform: translate(x, y) rotate(1turn) scale(2); -->
<!-- tip1: order不同产生result不同
(rotate导致坐标轴方向发生变化,translate根据坐标轴方向发生偏移,从而导致位移方向随着旋转而变化)-->
<!-- tip2: 一般将translate放在最前面 -->
<!-- animation动画 -->
<!-- 设置关键帧:@keyframes name(move) {
from[0%] {
transform: translate(0, 0)
}
........
to[100%] {
transform: translate(1000px, 0)
}
} -->
<!-- 调用动画div {
[div-css-style]
animation-name: move; 动画名称
animation-duration: 2s; 动画时间
animation-timimg-function: ease; (linear,ease-in, ease-out,ease-in-out)动画运行曲线
animation-timing-function: steps(6); 步长,指定了时间函数的间隔数量
animation-delay: 0s; 动画延时 1s == 1000ms
animation-iteration-count: 1; 动画重复次数(infinite无限)
animation-direction: normal[默认]; 正向运行动画
animation-direction: alternate; 动画运行到结束状态时,再逆向运行动画
animation-direction: reverse; 逆向开始翻转播放
animation-direction: alternate-reverse; 逆向开始播放动画至结束状态后再返回运行
animation-fill-mode: backwards; 动画结束后,返回初始状态
animation-fill-mode: forwards; 动画结束后,停留在结束状态
animation-play-state: running; 动画运行
animation-play-state: paused; 鼠标经过时,动画暂停
} -->
<!-- animation动画简写: -->
<!-- animation: name duration timing-function delay iteration-count direction fill-mode; -->
<!-- animation: move 2s [linear] [0] [infinite] [alternate] [forwards]-->
<!-- animation-play-state 单独写,一般与hover搭配使用 -->
<!-- animation: [动画1], [动画2];一个animation可以添加多个动画,之间用逗号 -->
<!-- opacity透明度 -->
<!-- opacity取值1-0 -->
<!-- opacity不仅盒子本身设置了透明度,其里面的内容也会影响 -->
<!-- opacity: .5; -->
<!-- 如果有定位,会限制盒子转换的方向,需要添加transform属性改变此限制 -->
<!-- transform只能给一个元素使用一次,多次使用会重叠掉原来的 -->
</body>
</html>
CSS3之2D转换
最新推荐文章于 2024-08-17 22:24:13 发布
![](https://img-home.csdnimg.cn/images/20240711042549.png)