css3的2D变形
2024-08-31 21:23:37
一、2D变形
1、变形
transform:translate();translateX();translateY();translate(,);
2、过渡
transition:all 1s;
二、具体体现的例子
1、位移的实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>css3的2D变形</title>
<style>
div{
width: 100px;
height:100px;
background-color: skyblue;
}
div:active{
/* transform: translate(100px);写一个值：只有水平位移 */
/* transform: translate(100px,200px);写两个值，一个水平一个竖直 */
/* transform: translateX(100px);水平位移 */
/* transform: translateY(100px);垂直位移 */
/* 另外这里也可以写百分比，而这个百分比的参照物是自身 */
}
</style>
</head>
<body>
<div></div>
</body>
</html>
2、缩放
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>css3的2D变形</title>
<style>
div{
width: 100px;
height:100px;
background-color: skyblue;
/* 让所有元素的变化到时在1秒钟缓步进行 */
transition: all 1s;
}
div:active{
/* 位移 */
/* transform: translate(100px);写一个值：只有水平位移 */
/* transform: translate(100px,200px);写两个值，一个水平一个竖直 */
/* transform: translateX(100px);水平位移 */
/* transform: translateY(100px);垂直位移 */
/* 另外这里也可以写百分比，而这个百分比的参照物是自身 */
/* 缩放 */
/* transform: scale(1.2);相对于自身的1.2倍 宽高*/
/* transform: scaleX(1.2);宽度相对于自身的1.2倍 */
/* transform: scaleY(1.2);高度相对于自身的1.2倍 */ }
</style>
</head>
<body>
<div></div>
</body>
</html>
3、旋转
/* 旋转 */
/* transform-origin: center; */
/* 这里是默认的旋转参考点 ，还可以自行设置像素值，百分比等*/
/* transform: rotate(-90deg);正负值代表旋转的方向 */
4、倾斜
/* 倾斜 */
/* transform: skew(90deg,0);水平垂直 */
/* transform: skewX(60deg);水平 */
/* transform: skewY(60deg);垂直 */
最新文章
- 初识Jsp，JavaBean,Servlet以及一个简单mvc模式的登录界面
- Android M Permission 运行时权限 学习笔记
- wdcp安装
- Python的名字绑定
- java 高精度
- OSGI容器与插件
- LeetCode 3
- CentOS 7 安装 Apache PHP MariaDB
- JavaScript获取非行间样式/定义样式
- Avi视频生成缩略图时，提示“尝试读取或写入受保护的内存。这通常指示其他内存已损坏”
- C语言入门（9）——局部变量与全局变量
- 在Git上如何强推代码规范
- 用C#实现微信“跳一跳”小游戏的自动跳跃助手
- spring基本知识
- Confluence 6 升级自定义的站点和空间布局
- 8款不错的 CI/CD工具
- 高并发之限流RateLimiter（二）
- 更改 Windows 软件默认安装位置教程
- nwjs 解决手指可滑动问题
- [Unity]制作游戏中名字板的过程记录