CSS3 2D变形 过渡 动画

​​​​​

  • transform(2D变形)

  • 概述translate()平移scale()缩放

  • skew()倾斜

  • rotate()旋转

  • transform-origin中心原点

  • CSS3 2D变形 3D变形 过渡 动画

    在CSS3中,动画效果包括4个部分:变形(transform)、3D变形、过渡(transition)、动画(animation)。

    translate() 平移
    语法

    transform: translateX(x);    /沿x轴方向平移/
    transform: translateY(y);    /沿y轴方向平移/
    transform: translate(x, y);   /沿x轴和y轴同时平移/

示例

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title></title>

<style type="text/css">

div {

width: 150px;

height: 100px;

}

.box {

border: 1px dashed silver;

}

.current {

background-color: rgb(30, 170, 250);

opacity: 0.5;

transform: translate(20px, 20px);

}

</style>

</head>

<body>

<div class="box">

<div class="current"></div>

</div>

</body>

</html>

复制代码
scale() 缩放
语法

transform: scaleX(x);    /*沿x轴方向缩放*/
transform: scaleY(y);    /*沿y轴方向缩放*/
transform: scale(x, y);   /*沿x轴和y轴同时缩放*/

示例

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title></title>

<style type="text/css">

div {

width: 150px;

height: 100px;

}

.box {

border: 1px dashed silver;

margin: 50px auto;

}

.current {

background-color: rgb(30, 170, 250);

opacity: 0.5;

transform: scale(1.2, 1.5);

}

</style>

</head>

<body>

<div class="box">

<div class="current"></div>

</div>

</body>

</html>

复制代码
skew() 倾斜
语法

transform: skewX(x);    /*沿x轴方向倾斜*/
transform: skewY(y);    /*沿y轴方向倾斜*/
transform: skew(x, y);   /*沿x轴和y轴同时倾斜*/

示例

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title></title>

<style type="text/css">

div {

width: 150px;

height: 100px;

}

.box {

border: 1px dashed silver;

margin: 50px auto;

}

.current {

background-color: rgb(30, 170, 250);

opacity: 0.5;

transform: skewY(30deg);

}

</style>

</head>

<body>

<div class="box">

<div class="current"></div>

</div>

</body>

</html>

复制代码
​
rotate() 旋转
语法

transform: rotate(angle);

说明

angle参数:表示元素相对于中心原点旋转的度数,单位为deg。如果度数为正,则表示顺时针旋转;如果度数为负,则表示逆时针旋转。

​

示例

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title></title>

<style type="text/css">

div {

width: 150px;

height: 100px;

}

.box {

border: 1px dashed silver;

margin: 50px auto;

}

.current {

background-color: rgb(30, 170, 250);

opacity: 0.5;

transform: rotate(30deg);

}

</style>

</head>

<body>

<div class="box">

<div class="current"></div>

</div>

</body>

</html>

复制代码
transform-origin 中心原点
语法

transform-origin: 取值;
1
说明

transform-origin属性取值有两种:一种是"长度值",另一种是"关键字"。

当取值为长度值时,单位可以为px、em和百分比等。

当取值为关键字时,transform-origin属性取值跟background-position属性取值是相似的。

示例

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title></title>

<style type="text/css">

div {

width: 150px;

height: 100px;

}

.box {

border: 1px dashed silver;

margin: 100px auto;

}

.current {

background-color: rgb(30, 170, 250);

opacity: 0.5;

transform-origin: top right;

transform: rotate(-90deg);

}

</style>

</head>

<body>

<div class="box">

<div class="current"></div>

</div>

</body>

</html>

相关推荐
弗锐土豆7 分钟前
一个基于若依(ruoyi-vue3)的小项目部署记录
前端·vue.js·部署·springcloud·ruoyi·若依
Hilaku10 分钟前
我为什么放弃了“大厂梦”,去了一家“小公司”?
前端·javascript·面试
1undefined212 分钟前
element中的table改造成虚拟列表(不定高),并封装成hooks
前端·vue.js
浅墨momo16 分钟前
搭建第一个Shopify App
前端·程序员
然我20 分钟前
React 事件机制:从代码到原理,彻底搞懂合成事件的核心逻辑
前端·react.js·面试
Codebee20 分钟前
OneCode 组件服务通用协议栈:构建企业级低代码平台的技术基石
前端·前端框架·开源
Running_C20 分钟前
常见web攻击类型
前端·http
jackyChan20 分钟前
ES6 Proxy 性能问题,你真知道吗?🚨
前端·javascript
lichenyang45320 分钟前
快速搭建服务器,fetch请求从服务器获取数据
前端