016day（2d转化的一些属性和标签）

最新推荐文章于 2021-08-05 22:43:59 发布
最新推荐文章于 2021-08-05 22:43:59 发布
阅读量171 收藏
点赞数
分类专栏： 如何从一个前端小白逆袭成为大佬
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/w296932099/article/details/119277167
版权

一、2d转化

变形属性：transform

transform翻译成汉语具有"变换"或者"改变"的意思。

通过此属性具有非常强大的功能，比如可以实现元素的位移、拉伸或者旋转等效果

最能体现transform 属性强大实力的是实现元素的3D变换效果

2D

2D变换，是在一个平面对元素进行的操作。

可以对元素进行水平或者垂直位移、旋转或者拉伸

二、变形属性：transform的所有属性值

1、transform：none;默认值

2、transform：translate（）；移动  平移  单位是px

3、transform：rotate（）；旋转  单位是deg   deg度数

4、transform：scale（）；缩放  没有单位  默认值是1

5、transform：skew（）；倾斜   单位是deg

6、transform：matrix（）；矩阵 

7、transform：perspective（）；景深   视距  单位是px

三、确定坐标系

对上面坐标系简单分析如下：

（1）.默认状态下，x轴是水平的，向右为正。

（2）.默认状态下，y轴是垂直的，向下为正，这与传统的数学坐标系不同。

四、translate平移

1、transform ：none；定义不进行转换。

transform ：translate(200px)；平移，默认是X轴移动，可以单位是%，这个%是自己的，不是父元素的

2、transform ：translate(200px)；默认是按照X轴移动

3、transform ：translateX(200px)；根据X轴给定的参数，从当前元素位置移动。

4、transform ：translateY(200px)；根据Y轴给定的参数，从当前元素位置移动。

5、transform ：translate(10px,20px)；定义 2D 平移移动。

6、transform ：translateX(200px)   translateY(200px) ；

五、rotate旋转

transform ：rotate(30deg)；旋转 单位deg  默认是Z轴旋转

1、transform ：rotate(30deg)；默认是按照Z轴旋转。

2、transform ：rotateX(30deg)；根据X轴给定的参数，从当前元素位置旋转。

3、transform ：rotateY(30deg)；根据Y轴给定的参数，从当前元素位置旋转。

4、transform ：rotateX(30deg)   rotateY(30deg)  ；

六、scale缩放

transform ：scale(2)；X和Y同时缩放 默认值是1

1、transform ：scale(2)；默认是X和Y同时缩放。

2、transform ：scaleX(2)；通过设置 X 轴的值来定义缩放转换

3、transform ：scaleY(3)；通过设置 Y 轴的值来定义缩放转换。

4、transform ：scale(2,5)；定义 2D 缩放。

5、transform ：scaleX(2)   scaleY(3) ；该元素增加或减少的大小，取决于宽度（X轴）和高度（Y轴）的参数，可以取负值。只不过取负值时，会先让元素进行翻转（顺时针180deg），然后在进行缩放

七、sken倾斜

transform ：skew(30deg)；倾斜 单位deg

1、transform:skew(30deg)；默认是X轴倾斜。

2、transform ：skewX(30deg)；通过设置 X 轴的值来定义倾斜转换

3、transform ：skewY(30deg)；通过设置 Y 轴的值来定义倾斜转换

4、transform ：skew(30deg,130deg)；定义 2D 倾斜

5、transform ：skewX(30deg)  skewY(130deg)  ；

八、

transform ：matrix()；矩阵

1、transform ：matrix(n,n,n,n,n,n)；定义 2D 转换，使用六个值的矩阵。

transform ：perspective()；景深  视距 给到元素本身上

transform ：perspective(200px)；景深，用来设置用户的眼睛距离元素的距离，数值越大

表示距离越远，看到元素的变化就不明显。不能给负值

九、转换基点

改变元素基点的位置transform-origin

他的主要作用就是让我们在进行transform动作之前可以改变元素的基点位置。

A、transform-origin(X,Y):用来设置元素的运动的基点（参照点）。默认点是元素的中心点。其中X和Y的值可以是百分值,em,px，其中X也可以是字符参数值left,center,right；Y和X一样除了百分值外还可以设置字符值top,center,bottom。

B、transform-origin(X，Y，Z)；其中的Z轴的设置，只能是数值。

附注1、

 

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Document</title>

<style>

*{

padding: 0;margin: 0;

}

div{

width: 295px;

height: 246px;

position: relative;

border: 1px solid red;

}

img{

position: absolute;

top: 5px;

left: 5px;

/* transition: 1s; */

width: 290px;

z-index: 2;

transition: 1s;

}

div:hover img{

top: 100px;

left: 100px;

width: 50px;

}

.a{

position: absolute;

top: 120px;

left:100px ;

transition: 1s;

z-index: 1;

}

div:hover .a{

top: 10px;

}

.b{

position: absolute;

top: 20px;

left: 100px;

z-index: 1;

transition: 1s;

}

div:hover .b{

top:200px;

}

</style>

</head>

<body>

<div>

<p class="a">阿斯顿</p>

<img src="../015day.1上课练习/img/image01.jpg" >

<p class="b">手动阀</p>

</div>

</body>

</html>

附注2、

 

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Document</title>

<style>

*{

padding: 0;margin: 0;

}

section{

width:640px;

height: 400px;

border: 1px solid red;

margin: 0 auto;

overflow: hidden;

}

p{

text-align: center;

transition: 2s;

}

img{

transition: 2s;

}

section:hover p{

transform: translate(0,-200px);

}

section:hover img{

transform: scale(1.3);

}

</style>

</head>

<body>

<section>

<div>

<img src="../015day.1上课练习/img/1.jpg" alt="">

</div>

<p>撒打算打算</p>

</section>

</body>

</html>

附注3、折扇

 

 

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Document</title>

<style>

*{

padding: 0;margin: 0;

}

section{

width: 500px;

height: 400px;

border: 1px solid red;

margin: 100px auto;

position: relative;

}

div{

width: 40px;

height: 200px;

background: pink;

position: absolute;

top: 40px;

left: 230px;

transform-origin: bottom center;

transition: 2s;

opacity: 0.5;

border-radius: 50px 50px 50px 50px;

}

section div:nth-child(1){

background-color: purple;

}

section div:nth-child(2){

background-color: pink;

}

section div:nth-child(3){

background-color: green;

}

section div:nth-child(4){

background-color: lawngreen;

}

section div:nth-child(5){

background-color: lightblue;

}

section div:nth-child(6){

background-color: lightgrey;

}

section div:nth-child(7){

background-color: lightpink;

}

section div:nth-child(8){

background-color: lightcyan;

}

section div:nth-child(9){

background-color: yellow;

}

section div:nth-child(10){

background-color: yellowgreen;

}

section div:nth-child(11){

background-color: lightsalmon;

}

section div:nth-child(12){

background-color: orange;

}

section div:nth-child(13){

background-color: orchid;

}

section:hover div:nth-child(1){

transform: rotate(90deg);

opacity: 1;

}

section:hover div:nth-child(2){

transform: rotate(75deg);

opacity: 1;

}

section:hover div:nth-child(3){

transform: rotate(60deg);

opacity: 1;

}

section:hover div:nth-child(4){

transform: rotate(45deg);

opacity: 1;

}

section:hover div:nth-child(5){

transform: rotate(30deg);

opacity: 1;

}

section:hover div:nth-child(6){

transform: rotate(15deg);

opacity: 1;

}

section:hover div:nth-child(7){

transform: rotate(0deg);

opacity: 1;

}

section:hover div:nth-child(8){

transform: rotate(-15deg);

opacity: 1;

}

section:hover div:nth-child(9){

transform: rotate(-30deg);

opacity: 1;

}

section:hover div:nth-child(10){

transform: rotate(-45deg);

opacity: 1;

}

section:hover div:nth-child(11){

transform: rotate(-60deg);

opacity: 1;

}

section:hover div:nth-child(12){

transform: rotate(-75deg);

opacity: 1;

}

section:hover div:nth-child(13){

transform: rotate(-90deg);

opacity: 1;

}

</style>

</head>

<body>

<section>

<div></div>

<div></div>

<div></div>

<div></div>

<div></div>

<div></div>

<div></div>

<div></div>

<div></div>

<div></div>

<div></div>

<div></div>

<div></div>

</section>

</body>

</html>

附注4、正方体的两种做法

第一种（这种是去正方体的中间切面为基准，然后6个面都是通过中间的面平移加旋转得到的）

 

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Document</title>

<style>

*{

padding: 0;margin: 0;

}

section{

width: 400px;

height: 400px;

/* background-color: pink; */

margin:200px auto 0 ;

transform: rotatex(20deg) rotatey(30deg);

position: relative;

transform-style: preserve-3d;

}

div{

width: 400px;

height: 400px;

position: absolute;

text-align: center;

line-height: 400px;

font-size: 100px;

}

div:nth-child(1){

transform:translateZ(200px);

background-color: powderblue;

opacity: 0.5;

}

div:nth-child(2){

transform:translateZ(-200px) rotatey(180deg);

background-color: red;

opacity: 0.5;

}

div:nth-child(3){

transform:translatex(-200px) rotatey(-90deg);

background-color: greenyellow;

opacity: 0.5;

}

div:nth-child(4){

transform:translatex(200px) rotatey(90deg);

background-color: burlywood;

opacity: 0.5;

}

div:nth-child(5){

transform:translatey(-200px) rotatex(90deg);

background-color: blue;

opacity: 0.5;

}

div:nth-child(6){

transform:translatey(200px) rotatex(-90deg);

background-color: pink;

opacity: 0.5;

}

</style>

</head>

<body>

<section>

<div>1</div>

<div>2</div>

<div>3</div>

<div>4</div>

<div>5</div>

<div>6</div>

</section>

</body>

</html>

第二种（这种方法是以数字1的面为基准，然后通过平移和以1面的其中一个边为基准通过旋转获得了）

 

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Document</title>

<style>

*{

padding: 0;margin: 0;

}

section{

width: 400px;

height: 400px;

margin: 300px auto 0;

transform: rotatex(30deg) rotatey(20deg);

position: relative;

transform-style: preserve-3d;

background-color: lightskyblue;

}

div{

width: 400px;

height: 400px;

background-color: pink;

position: absolute;

text-align: center;

line-height: 400px;

font-size: 100px;

}

div:nth-child(1){

background-color: red;

opacity: 0.5;

}

div:nth-child(2){

transform:translatez(400px);

background-color: yellow;

opacity: 0.8;

}

div:nth-child(3){

transform:rotatey(-90deg);

transform-origin: left center;

background-color: blue;

opacity: 0.8;

}

div:nth-child(4){

transform:rotatey(90deg);

transform-origin: right center;

background-color: greenyellow;

opacity: 0.5;

}

div:nth-child(5){

transform:rotatex(90deg);

transform-origin: top center;

background-color: pink;

opacity: 0.5;

}

div:nth-child(6){

transform:rotatex(-90deg);

transform-origin: bottom center;

background-color: purple;

opacity: 0.8;

}

</style>

</head>

<body>

<section>

<div>1</div>

<div>2</div>

<div>3</div>

<div>4</div>

<div>5</div>

<div>6</div>

</section>

</body>

</html>

 

w296932099
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
2D Day Night Shadows
10-27
2D Day Night Shadows 白天黑夜效果切换工具。shadow实现
CSS -- 2D转换各属性讲解（translate，rotate，scale）
Qlz的博客
12-22 520
2D转换 转换(transform)是CSS3中具有颠覆性的特征之一，可以实现元素的位移、旋转、缩放等效果 转换(transform)你可以简单理解为变形 移动：translate 旋转：rotate 缩放：scale 1 二维坐标系 2D转换是改变标签在二维平面上的位置和形状的一种技术，先来学习二维坐标系
CSS3------2D转换(transform属性)
qq_44193064的博客
04-21 353
1.2D转换对元素进行移动、缩放、转动、拉长或拉伸等操作 2.2D转换的方法有: 函数 描述 matrix(n,n,n,n,n,n) 定义 2D 转换，使用六个值的矩阵 translate(x,y) 定义 2D 转换，沿着 X 和 Y 轴移动元素 translateX(n) 定义 2D 转换，沿着 X 轴移动元素 translateY(n) 定义 2D 转换，沿着 Y ...
【44】CSS3（4）——新增属性② 2D转换
倏存的博客
04-09 2040
⚪介绍⚪属性值及举例⚪transform-origin属性⚪综合案例
H5C3 学习(三) ---- 过渡,2d转换,3d转换各种属性
WjiaoJ的学习
04-16 770
一.过渡 transition:过渡是css3中具有颠覆性的特征之一,可以实现元素不同状态间的平滑过渡(补间动画). 必须有两个不同的状态 1.补间动画和帧动画 帧动画:通过一帧一帧的画面按照固定顺序和速度播放 补间动画:补间动画只需要起始状态和终止状态,浏览器自动完成中间的过渡 2.过渡的属性 1. transtion-property:设置过渡属性; 如: transition-...
css3 2d/3d变换重点属性详解
abc33445的博客
07-04 646
css3 2d/3d变换——实现超炫的特效 声明：所有结论都是经过实际代码运行的效果证实的，如果有不同的情况发生，请核对浏览器版本以及内核（360浏览器，webkit内核）是否与本人试验的时候一致，同时非常感觉读者阅读本文，如有错误之处，欢迎大家留言指出。 css3的2d/3d变换是一个很强大的功能，以前想要做到图片的倾斜或者旋转某个角度，都无法简单的做到，更别说3d效果的实现，这里的3...
day20_字节流、字符流、属性集.pdf
11-02
day20_字节流、字符流、属性集.pdf
Godot-3-2D-Day-Night-Cycle:使用CanvasModulate的简单2D:sun:Day:waxing_gibbous_moon:Night周期和使用Light2D的月光效果
05-08
Godot 3 2D日/夜循环 2D :sun: 日 / :waxing_gibbous_moon: 夜循环使用CanvasModulate和利用月球的光效Light2D 。例子 在没有月光的情况下循环。 与月球静止不动的循环。 随着月光的移动而循环。 :joystick: 演示版...
day7-选择器，列表和表单标签.md
04-25
day7-选择器，列表和表单标签.md
day5shell函数和数组shell编程.txt
03-19
day5shell函数和数组shell编程.txt
016day（考试题）
w296932099的博客
07-31 3582
1.以下哪个不是定位属性的属性值? A.static【默认定位】 B.absolute【绝对定位】 C.fixed【固定定位】 D.visibility 2.不属于form标签的属性的是? A.name B.method【提交方式】 C.get【method的属性值】 D.action【后台的路径】 3.img标签中不包含的属性有? A.alt【图片走走丢之后的提示】 B.title【鼠标悬停显示的内容】 C.url D.src【图片的路径】 4.以下属性...
007day（考试）
w296932099的博客
07-20 3176
阿斯顿dasd 一、测试 单选（每题2分，共30题） 1.在HTML中，实现鼠标悬停在超链接上时，为无下划线的效果 A：a{text-decoration:underline} B：a{text-decoration:none} C：a:hover{text-decoration:none} D：a:link{text-decoration:underline} 2.阅读下面HTML代码，段落标签<p>内文本最终显示的颜色是 <...
015day(css控制单词换行的属性，css设置中英文大小写的属性，背景渐变)
w296932099的博客
07-29 1237
一、css控制单词换行的属性 1、word-break自己决定自动换行的处理方法 ①word-break：normal:使用浏览器默认的换行规则。(英文) ②word-break：keep-all:不允许中文字断开，以符号作为换行的标志。 ③word-break：break-all:允许在单词内换行，可以强行截断英文单词，达到词内换行效果。 2、word-wrap用来标明是否允许浏览器在单词内进行断句 ①word-wrap：normal 默认值。 ②word-wrap：break-word：.
014day(h5的发展史，h5的兼容，h5的语法，h5的语义化，h5的常用标记，百分比下字体居中的两种方法，video视频文件，audio音频文件，
w296932099的博客
07-28 704
一、h5的发展史 1、HTML5草案的前身名为 Web Applications 1.0，于2004年被WHATWG提出，于2007年被W3C接纳，并成立了新的 HTML 工作团队。 HTML 5 的第一份正式草案已于2008年1月22日公布。HTML5 仍处于完善之中。然而，大部分现代浏览器已经具备了某些 HTML5 支持。 2012年12月17日，万维网联盟（W3C）正式宣布凝结了大量网络工作者心血的HTML5规范已经正式定稿。根据W3C的发言稿称：“HTML5是开放的Web网络平台的奠基..
003day （css文本、列表、背景相关属性，精灵图的制作）
w296932099的博客
07-15 404
一、css文本相关属性 1、字体的颜色也可以转换为16进制的颜色（可以直接百度搜索16进制颜色表）和rgb属性的颜色。例如：red=#b0b0b0=rgb（211，176，33）。 一共三种表现形式像括号里面的一样。 2、font-size设置字体大小单位可以是px，pt，em。12pt=16px=1em 浏览器默认是16px,设计图常用字号是12px。在浏览器右键设置里面可以设置字体。 3、font-family字体样式，加不加引号都ok 4、font-weight（后面可以跟数字或bo..
020day（支付宝页面制作【利用js插件除100就是rem的】，CSS3的grid布局）
w296932099的博客
08-05 380
一、grid（网格）布局 1、网格布局（Grid）它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局 2、grid布局相关概念 1⃣.采用网格布局的区域，称为"容器"（container）。 2⃣.容器内部采用网格定位的子元素，称为"项目"（item）。 3⃣.注意：项目只能是容器的顶层子元素，不包含项目的子元素。Grid 布局只对项目生效。 3、grid布局中的行和列 1⃣.容器里面的水平区域称为"行"（row），垂直区域称为"列"（column）。 4、
012day(表单，表单的css样式，post和get，h5新增加的表单type属性值，h5新增的表单属性，h5新增加的表单标签，bfc)
w296932099的博客
07-26 329
一、表单 1、表单的作用：用来收集用户的信息的; 2、表单的组成： ①表单域：（表单的区域） <form name="" method="get/post" action=""></form> ②表单控件 ： <input type="text" value=""/> 3⃣提示信息（请输入姓名） 3、单选框radio 请选择你的性别<input type="radio" name="sex">男 <input type="radio" n
019day（常见布局方案，meta标签，媒体查询media用法）
w296932099的博客
08-04 304
一、常见的布局方案 1、固定布局：以像素作为页面的基本单位，不管设备屏幕及浏览器宽度，只设计一套尺寸； 2、可切换的固定布局：同样以像素作为页面单位，参考主流设备尺寸，设计几套不同宽度的布局。通过识别的屏幕尺寸或浏览器宽度，选择最合适的那套宽度布局； 3、响应布局：对页面进行响应式的设计实现，需要对相同内容进行不同宽度的布局设计，有两种方式：pc优先（从pc端开始向下设计）；移动优先（从移动端向上设计）； 无论基于那种模式的设计，要兼容所有设备，布局响应时不可避免地需要对模块布局做一些变化（发生布局
009day（vertical-align属性，White-space属性，Overflow属性，Text-overflow属性）
w296932099的博客
07-22 231
一、vertical-align属性 文字与图片的位置 1、垂直对齐：在垂直方向设置元素的位置 2、应用场景：log垂直居中、下拉菜单垂直居中、控制文本与图片的位置 3、语法：verticla-align（必须转化为行内块） 4、文字与图片的位置 只有元素类型是行内或者行内块元素才支持vertical-align属性 vertical-align：baseline；默认值 baseline基线 vertical-align：middle；垂直在line-height范围居中对齐（就是图片外..
day--和--day区别
最新发布
04-18
"day--"和"day"是两种不同的操作符，它们在编程中有着不同的含义和用法。 1. "day--"是一个后缀自减操作符，用于将变量的值减1，并返回减1之前的值。例如，如果有一个变量day的值为5，执行day--操作后，day的值将...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值