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>

相关推荐
brzhang5 小时前
我操,终于有人把 AI 大佬们 PUA 程序员的套路给讲明白了!
前端·后端·架构
止观止6 小时前
React虚拟DOM的进化之路
前端·react.js·前端框架·reactjs·react
goms6 小时前
前端项目集成lint-staged
前端·vue·lint-staged
谢尔登6 小时前
【React Natve】NetworkError 和 TouchableOpacity 组件
前端·react.js·前端框架
Lin Hsüeh-ch'in6 小时前
如何彻底禁用 Chrome 自动更新
前端·chrome
augenstern4168 小时前
HTML面试题
前端·html
张可8 小时前
一个KMP/CMP项目的组织结构和集成方式
android·前端·kotlin
G等你下课8 小时前
React 路由懒加载入门:提升首屏性能的第一步
前端·react.js·前端框架
蓝婷儿9 小时前
每天一个前端小知识 Day 27 - WebGL / WebGPU 数据可视化引擎设计与实践
前端·信息可视化·webgl
然我9 小时前
面试官:如何判断元素是否出现过?我:三种哈希方法任你选
前端·javascript·算法