首页 👨‍💻计算机

学习目标

  • [x] 能够使用2d转换属性

    • 属性名:transform
    • 属性值

      • 缩放:scale
      • 旋转:rotate
      • 平移:translate
  • [x] 能够认识3d坐标系

    • x轴:水平向右
    • y轴:垂直向下
    • z轴:垂直浏览器的平面,指向脸的方向
  • [x] 能够使用3d转换属性

    • 属性名:transform
    • 属性值

      • 3d旋转:沿着x轴或者y轴旋转,此时是3d旋转
      • 3d平移:沿着z轴平移,此时就是3d平移
  • [x] 能够跟随课堂完成立方体案例
  • [x] 能够理解perspectivetransform-style:preserve-3d 的区别

    • perspective:表示给子元素设置近大远小的视觉效果,元素本身默认还是2d平面的元素
    • transform-style:preserve-3d :可以让当前元素变成一个真正的3d立体元素

。。。。。。

理解上课的知识点......

移动web课程基本介绍

CSS3新属性 + 移动端web网页布局

  • CSS3新属性

    • 2d转换 + 3d转换、动画(花里胡哨的效果)
  • 移动端web网页布局

    • flex布局(重点):flex布局(css3提出的新的布局方式,比之前浮动+定位更好用)
    • rem布局(重点):完成移动端所有元素等比例缩放的效果
  • 响应式效果(了解)

    • 媒体查询:实现响应式的基本原理
    • bootstrap框架:经典的UI框架

阶段目的: 熟练布局网页的方法,提升网页布局的技术(pc + 移动),给网页布局收尾。之后阶段都会以js为主

2D转换 transform

转换 transform 是CSS3最具颠覆性的几个特性之一,可以让元素实现缩放、旋转、平移等效果。

2D坐标系

浏览器中存在平面坐标系,x轴和y轴互相垂直

2D转换:即让元素在平面上实现转换效果。

x轴: 水平向右是x轴正方向

y轴: 垂直向下是y轴正方向

缩放 scale

缩放转换可以让元素进行放大或者缩小

2d转换缩放

需求:此时需要让一个有内容的div鼠标移入之后,让整体宽度放大为两倍,可以怎么实现呢?(如果包括内容也缩放呢?)

方案:

  • 可以hover之后设置width为原来的两倍

但是div里面的内容并不会缩放

  • 可以使用transform:scaleX(2); 对div进行缩放,并且div的内容也会缩放

代码:

/* 让宽度进行缩放 */
transform: scaleX(2);

/* 让高度进行缩放 */
transform: scaleY(2);

/* 如果需要同时设置宽度和高度进行缩放 */
transform:scale(2,2);
/* 特殊情况:或者只设置一个,表示宽高都是一个比例 */
transform: scale(2);

取值:没有单位的数字(倍数)


小结:

  1. 浏览器中的2D坐标系中x和y轴默认分别是什么方向?

    1. x轴:水平向右
    2. y轴:垂直向下
  2. 2D缩放的属性名和属性值分别是什么?

    1. 属性名:transform
    2. 属性值:scale

ヾ(๑╹◡╹)ノ" 网页图片放大效果

当用户鼠标移入后,让盒子内部的图片放大,如:穷游网

步骤:

  1. 设置 div.box 盒子,大小和图片保持一致,内部包裹图片
  2. 设置 div.boxhover 之后,让图片放大为原来的两倍
  3. 为了让图片慢慢的变化,需要给图片设置过渡属性
  4. div.box 盒子内部的图片超出隐藏,给 div.box 设置溢出隐藏属性

转换原点 transform-origin

缩放转换效果默认是以元素中心点方法的,如果需要让元素以特殊位置放大,可以通过 转换原点: transform-origin设置

代码: transform-origin:center center;

取值:

原点的取值和之前学习的background-position是一样的

  • 方位名词:

    • 水平:left、center、right
    • 垂直:top、center、bottom
  • 坐标点:以元素左上角为原点,水平向右是x轴,垂直向下是y轴

小结:

  1. 转换原点的属性名是什么?

    1. transform-origin
  2. 转换原点的取值如何书写?

    1. 方位名词
    2. 数字+px(坐标)
  3. 转换原点属性给谁设置?

    1. 需要更改原点的元素本身设置

旋转 rotate

旋转效果可以让元素进行旋转

2d转换旋转

代码: transform:rotate(90deg);

取值:角度(deg),顺时针进行转动

注意点:

  • 也可以通过 transform-origin 属性来设置旋转原点

小结:

  1. 2D旋转的属性名和属性值分别是什么?

    1. 属性名:transform
    2. 属性值:rotate

ヾ(๑╹◡╹)ノ" 扑克牌效果

步骤:

  1. 设置 div.box 盒子,大小和一张图片大小保持一致,内部包裹六张图片
  2. 设置图片一起子绝父相定位到 div.box 的左上角
  3. 设置 div.boxhover 之后,让不同的图片旋转不同的角度
  4. 为了让图片慢慢的变化,需要给图片设置过渡属性
  5. 设置图片的转换原点为中上点

平移 translate

平移转换可以让元素进行平移

2d转换平移

代码:

/* 沿着x轴进行平移 */
transform: translateX(100px);

/* 沿着y轴进行平移 */
transform: translateY(100px);

/* 沿着x轴和y轴进行移动 */
transform: translate(100px,100px);

取值:

  • 可以是具体的数值
  • 可以是百分比

百分比是相对于自身元素的百分比!

注意点:

  • translate平移不会影响其他盒子的位置,是相对于自己原来的位置进行移动的,类似于相对定位的效果。

小结:

  1. 2D平移的属性名和属性值分别是什么?

    1. 属性名:transform
    2. 属性值:translate
  2. 2D平移取值中使用百分比是相对于谁的百分比?

    1. 相对于自己的宽高的百分比
  3. 2D平移之后的元素会影响其他盒子的位置吗?

    1. 不会

ヾ(๑╹◡╹)ノ" 让一个盒子水平垂直都居中

之前让元素定位居中时,通过设置margin为负值完成的

但是如果元素宽高会变化,此时margin为负值较为麻烦,现在推荐使用translate属性完成

盒子水平居中步骤:

  1. 设置盒子定位(如:子绝父相)
  2. 让盒子往右走大盒子的一半:left:50%
  3. 让盒子往左走自己的一半

    1. 方法一:margin-left:-自己宽度一半px
    2. 方法二:transform:translateX(-50%)

小结:

  1. 让元素水平居中的核心代码为?

    1. left:50%;
    2. transform:translateX(-50%);
  2. 让元素水平垂直都居中的核心代码为?

    1. left:50%;
    2. top:50%;
    3. transform:translate(-50%,-50%);

转换的合写问题

之前每种转换都是分开实现的,如果需要让一个盒子同时实现三种转换,就需要使用到转换的合写形式

需求: 一个盒子在页面中居中,当hover到body时,让一个盒子 往右平移400px ,同时 旋转360度 ,同时 宽高都缩小为原来的0.5倍,可以怎么实现?

  • transform属性只能写一个,所以需要设置一个transform的连写形式。

代码:

transform: translateX(1000px) rotate(360deg) scale(0.5);

如果先写rotate(360deg)可不可以呢?

注意点:

  • transform属性值之间需要以空格隔开
  • rotate属性如果写在第一个,rotate会让坐标轴也一起旋转,坐标轴改变之后会平移的方向!

写在第一个的属性值会影响坐标轴

3D转换 transform

transform 不仅仅可以进行2D转换(平面内转换),还可以进行3D转换(立体的空间)

问题: 2D和3D的区别是什么呢?

3D坐标系

实际在浏览器中有一个立体坐标系,用x、y、z分别表示空间的3个维度,三条轴互相垂直。

x轴: 水平向右是x轴正方向

y轴: 垂直向下是y轴正方向

z轴: 做浏览器平面垂直向脸方向是z轴正方向

3d坐标系

透视、视距 perspective

需求: 让图片沿着x轴进行旋转,此时会立体旋转,看一下此时图片是往里还是往外旋转的?

因为电脑显示屏是一个2D的平面,所以直接沿着x轴立体旋转看不出效果。

此时可以通过perspective属性,可以定义眼睛距视图的距离,单位是px。

perspective 属性给父元素设置,可以让其子元素有近大远小的效果。

代码:

perspective:1000px;

其实和生活中的场景是一样的:

现实中路应该是一样的宽的,但是图中的路明显画的不一样宽,作为人的视觉会判断:路越来越远(近大远小)

per1

现实中房子应该都是一样大的,但是图片的房子明显不一样大,作为人的视觉会判断:左边的更远,右边的更近(近大远小)

per2

perspective 的取值:设置的是观察者眼睛离元素初始平面(z=0平面)的距离

  • 如果取值越大,表示距离越远,近大远小的效果就越不明显
  • 如果取值越小,表示距离越近,近大远小的效果就越明显

一般不会给太小,适中即可。


小结

  1. 视距的属性名和属性值分别是什么?

    1. 属性名:perspective
    2. 属性值:数字+px
  2. 视距的作用是什么?

    1. 给子元素添加近大远小的视觉效果
  3. 视距属性给哪个元素设置?

    1. 给转换元素的父元素设置

接下来我们主要学习最常用的两个3d转换~

3D旋转 rotate

rotate直接设置就是2D平面效果。

当rotate沿着x轴或者y轴进行旋转时,此时就是3D的效果

代码:

/* 让元素沿着x轴旋转 */
transform: rotateX(45deg);

3d旋转rotateX

ヾ(๑╹◡╹)ノ" 演示3D旋转沿着不同轴旋转的效果

具体旋转的方向可以使用左手法则来判断:

  1. 掏出你的左手,左手握拳,伸出大拇指
  2. 让大拇指的指向轴的正方向
  3. 此时四指弯曲的方向就是图片旋转的方向

当然,其实具体效果不用纠结,写出代码看效果调试即可!

/* 让元素沿着y轴旋转 */
transform: rotateY(45deg);

3d旋转rotateY

/* 让元素沿着z轴旋转,就是默认平面的效果,即rotate() */
transform: rotateZ(45deg);
transform: rotate(45deg);

3d旋转rotateZ


小结:

  1. 沿着哪根轴旋转时,会是3D旋转?

    1. x轴和y轴
  2. 3D旋转的属性名和属性值分别是什么?

    1. 属性名:transform
    2. 属性值:rotateX() rotateY()

3D平移 translate

translate属性如果沿着z轴平移也会有3D的效果

代码:

/* 沿着z轴的正方向移动100px */
transform: translateZ(45px);

小结:

  1. 沿着哪根轴平移时,会是3D平移?

    1. z轴
  2. 3D平移的属性名和属性值分别是什么?

    1. 属性名:transform
    2. 属性值:translateZ()

3D平移的合写(了解)

需求:如果需要一个盒子同时往3个轴方向平移100px,怎么写呢?

/* 如果需要同时设置三个轴方向的平移,可以写成 */
transform: translateX(100px) translateY(100px) translateZ(100px);
/* 也可以使用3d移动的简写方法 */
transform:translate3d(x,y,z);

综合案例:立方体案例

通过今天学习的相关属性,可以完成立方体的案例

立方体效果

立方体案例思路铺垫

问题:

  1. 当一个元素rotateY(45deg)是什么效果?z轴指向哪里?
  2. 当一个元素rotateY(90deg)是什么效果?z轴指向哪里?

结论:朝向的方向就是z轴,旋转时,面朝的方向永远是z轴

实现六个面的思路:

  1. 先让旋转到面朝对应的方向
  2. 往面朝的方向(z轴)平移对应的距离即可

整体是一个ul,每一个面是li标签,然后让每一个面沿着不同方向旋转之后移动,组合成立方体

3d正方体思路

transform-style

transform-style 属性指定内部元素是怎样在三维空间中呈现

  • perspective 是一个伪3D:只是多个一个近大远小的效果而已,但是本质上来说还是一个平面元素
  • transform-style 可以真正实现3D空间的效果

演示: ul里面两个li100*400,让第二个li标签沿着x轴旋转45deg,此时旋转ul盒子看的效果

默认效果:

默认效果来说发现li标签变短了,看不出3d效果

默认

设置perspective:1000px之后:

设置视距之后只是有了近大远小的视觉效果,但是实际旋转看发现还是一个纸片人,不是真的3d元素

perspective

设置transform-style: preserve-3d; 之后:

设置了 transform-style: preserve-3d; 元素变成3d元素,是真的3d元素

preserve-3d

代码: transform-style:preserve-3d;

取值:

  • flat:子元素在2d平面中显示(默认值)
  • preserve-3d:子元素在3D空间中显示

transform-styleperspective 的区别:

  • perspective :只是在平面中模拟出近大远小的效果,并不是真正的3D元素。
  • transform-style :可以让其子元素在一个3D空间中布局,本身是真正的3D元素

注意点:

  • transform-style 属性是给

    • 需要变成3D元素的本身设置的。比如:立方体 ul 需要是一个真正的3D元素,所以直接给 ul 设置
    • 有人会看做给面的父元素设置。比如:给每个面 li 的 父元素 设置,其实也是 ul 标签,说法不同,但是结果一致

小结:

  1. 如果需要近大远小的效果,使用什么属性完成?给谁设置?

    1. perspective
    2. 给需要近大远小元素的父元素设置
  2. 如果需要让元素变成一个真正的3D元素,使用什么属性完成?给谁设置?

    1. transform-style:preserve-3d
    2. 给需要变成真正的3d元素本身设置
ヾ(๑╹◡╹)ノ" 作业:3D导航效果

3d导航

思路:

  • 整体是ul,每个导航是1(100px*50px),li有两个面,使用a标签表示
  • 通过定位先让两个a重叠,然后通过转换改变a标签面的位置

    • web前端首先需要沿着x轴旋转 90deg,然后沿着z轴直走高度的一半(25px)
    • 传智播客 直接沿着z轴直走高度的一半(25px)

拓展了解

过渡相关属性介绍

其实过渡属性可以分为多个单独的属性进行设置

基础班学习了过渡属性,直接设置的是 transition:1s; ,其实 transition 属性是一个复合属性

让一个盒子hover之后慢慢的变宽~

过渡的时间 transition-duration

设置完成过渡效果需要多少时间

代码:transition-duration:1s;

取值:

  • 具体的时间(1s)

过渡的属性 transition-property

设置过渡效果的css属性的名称

代码:transition-property:all;

取值:

  • 可以是具体的属性(width、height、......)
  • all(表示所有可以过渡的属性都有过渡的效果,默认值)

过渡的变化效果 transition-timing-function

设置过渡变化速度效果的不同

代码: transition-timing-function:linear;

取值:

  • ease:慢速→快速→慢速
  • linear:匀速变化
  • steps(n):过渡分为几步完成(n个步骤完成)

过渡的延时 transition-delay

设置过渡在多少时间之后开始

代码: transition-delay:2s;

取值:

  • 具体的时间

过渡的连写形式 transition

过渡相关属性都是以transition开头,可以通过transition属性设置相关属性

代码:

div {
    /* 过渡的属性 */
    transition-property: all;

    /* 过渡的时间 */
    transition-duration: 1s;

    /* 过渡的变化效果 */
    transition-timing-function: linear;

    /* 过渡的延时 */
    transition-delay: 2s;
}
/*----------------------------------*/
div {
    /* 连写形式 */
    transition: all 1s linear 2s;
}

连写的注意点:

  • 省略问题:按照需求省略,省略相当于设置了默认值
  • 顺序问题:没有要求,但是注意第一个时间永远是过渡时间

如果连写中只设置了一个时间,这个时间表示的是过渡的时间

如果连写中设置了两个时间,则第一个时间表示过渡的时间,第二个时间表示延时的时间

ヾ(๑╹◡╹)ノ" 拓展练习:3d相册

步骤:

  1. 设置结构:ul 表示相册的整体,li 表示相册的每一页,img 表示每页展示的图片
  2. 设置 ul 大小为固定的大小,如:300*400 ,设置 liimg 大小和 ul 保持一致
  3. 设置 li 定位到ul的左上角层叠摆放
  4. 功能一:鼠标移入 ulul 自己倒下去(沿着x轴旋转30deg)

    1. 需要给 ul 设置慢慢倒下去的过渡属性
    2. 需要给 body 设置视距,让 ul 倒下去有近大远小的视觉效果
    3. 需要给 ul 更改转换原点为 center bottom
  5. 功能二:鼠标移入ul后,等 1s ,让每一页翻开(沿着y轴旋转-180deg)

    1. 需要让 li 设置慢慢翻开的过渡属性
    2. 需要让 li 更改转换原点为 left center
    3. 需要给 ul 设置 transform-style:preserve-3d 让相册整体 ul 变成真正的3d元素
    4. 需要让 liul 倒下去之后,再翻开执行过渡,需要设置延时 1s
    5. 需要让之后的 li 翻开不同的角度,并且后一个比前一个多延时 1s


文章评论