css的2D转换

脚本化css

下面通过css实现动画效果,可以使用脚本化的css实现滑入,轮廓伸缩的列表,即动态的HTML,一个过时的说法DHTML

一些css的基础知识

之前已经看过厚厚的一本大书,现在简单看一下,补充一下不知道的点

层叠

web浏览器组合元素的style属性,然后再计算样式。

颜色透明度和半透明

颜色有半透明的颜色(不知道为什么edge不兼容)

脚本化内联样式

div.style.background = "#FFFFFF"

即通过js完成css样式的添加

由于-会被js认为有语法错误,所以-统一在js中变成驼峰命名法进行命名。这是一种习惯

同样的也可以直接使用属性进行设置

e.setAttribute

进行设置css的内联样式

其实是通过增加css的属性的内联样式达到效果的。即style的值

style的权重要大于任何的样式,所以用js生成的style的样式的值,一直起作用,除非刻意的更改其权重。

css的2d转换

即,进行一些css的转换

坐标

描述坐标的系统有笛卡尔坐标系统和齐次坐标系。

笛卡尔坐标系

用一组数值在一组平面上表示一个点。其坐标为右手法则(在三维上)

更多 https://en.wikipedia.org/wiki/Cartesian_coordinate_system

其下方的变换是基于笛卡尔坐标系进行变换

通过将点用矩阵进行表示,对矩阵进行变换,(线性的变换)得到相应的结果。例如进行乘法变换,加法变换等等。

transform

属性将会允许修改CSS视觉格式模型的坐标空间。使用它,元素可以被转换(translate)、旋转(rotate)、缩放(scale)、倾斜(skew)。 只对块级元素生效

原点

有三个值,一个值为x轴,一个值为y轴,一个值为z轴。

如下图所示

每个值可以进行设置,此为旋转原点

具体的值为transform-origin

如果未指定初始值,将会直接使用继承。

演示

https://developer.mozilla.org/zh-CN/docs/Web/CSS/transform-origin

rotate旋转

该方法定义了一种将元素围绕一个定点,该定点由transform-origin指定元素变形的原点。

单位 angle

一种css的基本数据类型。angle表示角的大小,单位为度(degrees)百分度(gradians)弧度(radians)圈数(turns)

deg 度

grad 百分度 (复习一下数学,一种角的测量单位,定义为将一个圆切成400等分,也就是一个直角等于100百分度 https://zh.wikipedia.org/wiki/%E7%99%BE%E5%88%86%E5%BA%A6

rad 弧度 (复习一下数学 https://zh.wikipedia.org/wiki/%E5%BC%A7%E5%BA%A6

turn 圈数

不列颠百科全书 https://www.britannica.com/biography/August-Ferdinand-Mobius

语法

数字与单位之间没有空格。数字为0时,单位可以省略。

使用+号或者-号开头,正数表示顺时针的角,负数表示逆时针的角。

一些例子

90deg = 100grad = 0.25trun ≈ 1.57rad(约等于π/2)

所有的如下表示

一个旋转说明

缩放 scale

一个css函数scale()用于缩放。用于修改元素的大小,通过向量形式定义的缩放值来放大和缩小元素。有两个值,一个值为sx,一个值为sy,根据两个值得出结果。如果sy未设置,将会直接用sx的值设置sy的值。其单位为css数据类型中的number

该缩放仅仅支持欧几里得平面(二维平面)上的变换

设置的css的值为

transform: scale(2, 2);

至此,完成了一个横轴一倍,纵轴一倍的放大。

同理,缩小也可以。

倾斜 skew

为一个偏斜的二维平面上的原件变化,其结果为数据类型。

剪切映射

css的倾斜为剪切映射,每个点的坐标由与指定角度或成比例的值到原点的距离。对于每个坐标产生矩阵,然后对矩阵进行运算,得出运算后的坐标值。

css的3d转换

坐标

齐次坐标系

由笛卡尔坐标系投影得到。

  1. 投影平面中的任何点由三元组(x,y,z)表示,称为点的齐次坐标和投影坐标
  2. 如果坐标乘以公因子,则给定的一组齐次坐标点不变
  3. 相反,当且仅当通过所有坐标乘以相同的非零常数,从另一个获得一个时,两组齐次坐标表示相同的点
  4. 当z不为0时,表示的点为欧几里得的点。
  5. 当z为0时表示的点为无穷远处的点

    更多 https://en.wikipedia.org/wiki/Homogeneous_coordinates

rotateX()

围绕x轴进行旋转

ps;设置的原点值为center

transform-origin:center;

rotateY()同理

3d组合不可进行交换,如果进行交换会导致出现不同的效果。

原文地址:https://www.cnblogs.com/melovemingming/p/9446385.html

时间: 2024-10-11 08:37:19

css的2D转换的相关文章

CSS中2d转换:transition过渡放在:hover伪类中与应用在整个元素中区别

css的2d转换十分强大,能够在不使用js的情况下,实现页面的元素与用户之间更多动态的交互,增强用户体验.其中使用最多的就是hover伪类. 1.创建一个页面的div元素: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>2d转换测试</title> </head> <body> <div id="fr&

CSS 3 2D转换

------转换:使用transform 属性将HTML元素 移动.旋转.缩放.倾斜 1.移动 translate(x轴,y轴) .translateX.translateY 2.旋转 rotate(45deg)//顺时针旋转45度 3.缩放 scale (1.2) //放大1.2倍 scale(x轴,y轴).scaleX .scaleY 4.倾斜 skew(45deg,-20deg)//沿x轴倾斜的角度,沿y轴倾斜的角度 transform-origin:转换基准点 -----默认,中心点 -

CSS 2D转换

转换是使元素改变形状.尺寸和位置的一种效果.通过 CSS3 转换,我们能够对元素进行移动.缩放.转动.拉长或拉伸,可以大致分为2D转换和3D转换.下面介绍的是2D转换的相关知识点. 首先,CSS中2D转换的形式是这样的: 选择器{ transform:转换函数(参数,参数): } 而2D转换的函数一共分为五大类: translate()   定义位移的函数:其中后面的参数分别是相对x轴,y轴的偏移的距离,单位为像素,形式:translate(30px,30px);表示相对x轴,y轴偏移30像素值

css3 2D转换效果

CSS中的2D变形主要用transform属性来实现,其可以用来控制元素的变形,如移动,比例化,反过来,旋转,和拉伸. transform属性的基本语法如下 1.translate() 移动元素,即基于X和Y 坐标重新定义元素位置. 用法如下: transform:translate(300px,200px): 或 transform:translateX(300px): transform:translateY(300px):12342.rotate() 旋转元素,其后括号内写旋转的角度,正值

CSS 3学习——transform 2D转换

首先声明一点,transform属性不为none的元素是它的定位子元素(绝对定位和固定定位)的包含块,而且对内创建一个新的层叠上下文. 注意:可以通过 transform-box 属性指定元素的那个盒子发生了变换,该属性的默认值是"border-box",查MDN只有Firefox支持该属性(我试的没效果). CSS 3 中2D转换的实现用到两个属性: 属性 描述 CSS transform 向元素应用 2D 或 3D 转换. 3 transform-origin 指定变换的基点的位置

Css3之高级-5 Css转换(简介、2D转换、3D转换)

一.转换简介 转换概述 - 转换是使元素改变形状.尺寸和位置的一种效果 - 又称为变形,即,可以向元素应用2D 或 3D 转换,从而对元素进行旋转.缩放.移动或倾斜 - 2D 转换: 使元素在 X轴 和 Y轴 平面上发生变化,改变其形状.尺寸和位置 - 3D 转换:元素还可以在 Z 轴上发生变化 转换属性 - transform 属性向元素应用 2D 或者 3D 转换 - 指定一组转换函数,取值 - transform: none/transform-function; - none - 默认值

##CSS 2D 转换##

通过CSS 2D转换,我们能够对元素进行移动.缩放.转动.拉长或拉伸. <br>2D转换一共五个属性:transfrom=> translate(X轴数值px,Y轴数值px):元素从其当前位置移动,根据给定的x坐标和y坐标位置参数,将元素移动到新的位置 <br>rotate(数值deg):元素顺时针旋转给定的角度,允许负值,元素将逆时针旋转. <br>scale(宽度数值,高度数值):元素的尺寸会增加或减少,根据给定的宽度和高度参数. <br>skew

css3之2D转换

css3---2D转换 css3中出现了许多新的特性,其中2D转换我觉的非常有意思,通过她,我们能够对元素进行移动.缩放.转动.拉长或者拉伸,所以希望在这里和大家分享以下. 这里,我将会介绍到以下转换方法: translate() rotate() scale() skew() 首先,我们先插入一个简单的html代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-

动画,2D转换,,3D转换怎样运用

动画 @keyframes 规则用于创建动画.在 @keyframes 中规定某项 CSS 样式, 就能创建由当前样式逐渐改为新样式的动画效果. 属性{[email protected] 2animation } 如:@keyframes myfirst { from {background: red;} to {background: yellow;} } @-moz-keyframes myfirst /* Firefox */ { from {background: red;} to {b