css3的2D变形
一、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);垂直 */
css3的2D变形的更多相关文章
- CSS3(3)---2D变形(transform)
CSS3(3)---2D变形(transform) 2D变形是CSS3中具有颠覆性的特征之一,它常用的属性有:移动(translate).缩放(scale).旋转(rotate).倾斜 (skew). ...
- CSS3过渡、变形和动画
1.CSS3过渡 所谓CSS3过渡,就是使用CSS3让元素从一种状态慢慢转换到另一种状态.如鼠标的悬停状态就是一种过渡.如下例子: #content a{ text-decoration: n ...
- CSS3 过渡、变形和动画
一.我们来给按钮增加一个悬停效果:#content a:hover {border: 1px solid #000000;color: #000000;text-shadow: 0px 1px whi ...
- CSS3——2D变形和3D变形
2D变形(CSS3) transform transform是CSS3中具有颠覆性的特征之一,可以实现元素的位移.旋转.倾斜.缩放,甚至支持矩阵方式,配合过渡和即将学习的动画知识,可以取代大量之前只能 ...
- 【CSS3练习】transform 2d变形实例练习
transform 2d变形实例练习:练习了旋转 倾斜 缩放的功能 <!DOCTYPE html> <html lang="en"> <head> ...
- 9.css3动画-2D/3D变形--trasform
transform: None不转换. Translate(x,y)通过设置X轴的值进行移动. translateY(y)通过设置Y轴的值进行移动. Scale(x,y)定义2D缩放. ScaleX( ...
- CSS3中的变形与动画【转】
最近在学习制作移动端的页面,做了一个微信页面的小demo,其中用到了很多的CSS3新增的内容,其中就有CSS3新增的变形和动画.其实这种CSS3的动画效果用JS也可以实现,不过CSS3能开启硬件加速, ...
- CSS3的2D与3D转换
2D和3D转换涉及到数学中的知识,作为一个数学专业的毕业生,不研究一下岂不是对不起自己的专业? 首先来看几个参数: 1.transform-origin:origin(起源,起点),也即变形的起点,在 ...
- css3之2D转换
css3---2D转换 css3中出现了许多新的特性,其中2D转换我觉的非常有意思,通过她,我们能够对元素进行移动.缩放.转动.拉长或者拉伸,所以希望在这里和大家分享一下. 这里,我将会介绍到以下转换 ...
随机推荐
- java基本类型映射表
- C#，判断数字集合是否是连续的
/// <summary> /// 判断数字集合是否是连续的 /// </summary> /// <returns></returns> public ...
- 访问配置信息的URL与配置文件的映射关系
- Windows的DOS命令
f: d: ...
- Java 面试题经典 77 问（含答案）！
金三银四了,3月底,4月初,找工作换单位的黄金时期.4月初将会有有一大批职场人士流动... 作为Java开发码农的你是不是也在蠢蠢欲动,或者已经搞了几轮车轮战了? 我们为大家准备了 77 道经典 Ja ...
- selenium基础（元素定位）
selenium的帮助文档: https://selenium-python.readthedocs.io/api.html#module-selenium.common.exceptions 目前支 ...
- 动软DbHelperSQL
using System; using System.Collections; using System.Data; using System.Data.SqlClient; using System ...
- 六. Default arguments 参数默认值
示例: 注意点:函数是会默认声明参数变量的,所以不需要再重新声明一次,否则会报错 错误示例如下: 函数参数的传值方法: 需要注意的是:如果要给第二个参数传值,那第一个参数要传undefined,而不能 ...
- Django之深入了解ORM
目录 Django ORM操作 常用字段 常用字段参数 自定义字段 单表操作 双下划线查询 模糊查询 多表操作 一对多字段数据的操作 多对多字段数据的操作 跨表查询 基于对象的跨表查询 基于双下划线的 ...
- 第七章 Odoo 12开发之记录集 - 使用模型数据
在上一篇文章中,我们概览了模型创建以及如何从模型中载入和导出数据.现在我们已有数据模型和相关数据,是时候学习如何编程与其进行交互 了.模型的 ORM(Object-Relational Mapping ...