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>

相关推荐
G等你下课17 分钟前
告别刷新就丢数据!localStorage 全面指南
前端·javascript
该用户已不存在18 分钟前
不知道这些工具,难怪的你的Python开发那么慢丨Python 开发必备的6大工具
前端·后端·python
爱编程的喵20 分钟前
JavaScript闭包实战:从类封装到防抖函数的深度解析
前端·javascript
LovelyAqaurius21 分钟前
Unity URP管线着色器库攻略part1
前端
Xy91023 分钟前
开发者视角:App Trace 一键拉起(Deep Linking)技术详解
java·前端·后端
lalalalalalalala26 分钟前
开箱即用的 Vue3 无限平滑滚动组件
前端·vue.js
前端Hardy26 分钟前
8个你必须掌握的「Vue」实用技巧
前端·javascript·vue.js
snakeshe101028 分钟前
深入理解 React 中 useEffect 的 cleanUp 机制
前端
星月日30 分钟前
深拷贝还在用lodash吗?来试试原装的structuredClone()吧!
前端·javascript
爱学习的茄子31 分钟前
JavaScript闭包实战:解析节流函数的精妙实现 🚀
前端·javascript·面试