您还没有专辑

开始创建自己的专辑吧

创建
您可在个人中心-我的专辑处查看
当前位置:首页 > 软件入门 > DW-transform样式

DW-transform样式

手机观看

扫一扫下载虎课app

支持离线缓存,随时随地学习

VIP优惠升级 19大分类,畅享43000+设计教程特权!

为自己充值升华学习
今日剩余学习次数:1

按住画面移动小窗

DW-transform样式

播放卡顿?建议切换线路

宽屏取消宽屏

学设计上虎课网

学习意犹未尽?成为VIP,继续提升

免费学习即将结束

关闭继续学习>

发表评论
收起宽屏
分享给朋友:
手机观看

扫一扫下载虎课app

支持离线缓存,随时随地学习

添加到专辑收藏已收藏收藏成功,可进入个人中心-课程收藏 查看!
目录信息笔记
课后练习学员评价 (60条评论)视频字幕查看优秀作品>

课后练习在紧急制作中。。。

课程综合评分:9.9
课程难易程度:太简单(2)简单(15)适中(36)有点难(7)太难了(0)
您需要学习后才可以评价,立即学习
评论列表
仅显示有内容的评论
仅显示带图评论
排序方式:

Hello大家好,我是M ,上节课我们已经完成了对于伪类,以及伪元素的一个学习 ,通过学习呢,我们已经了解了如何去在我们项目里面 ,运用伪类以及伪元素来使我们的网页结构变得相对简洁 ,那么这节课开始呢,我们就要学习怎么样通过CSS ,来给我们的网页 ,增加一些动画效果 ,那么说到动画呢,我们首先就应该学习一个新的样式啦 ,叫做Transform ,那么这个Transform是什么意思呢 ,英文好的同学们,就应该知道这个单词是变形的意思 ,那M这样英文基础几乎等于没有的是怎么记住的呢 ,主要是因为这几年有一个比较火的电影 ,叫变形金刚大家应该都知道,或者看了 ,?那么变形金刚这个电影的英文名呢叫做Transformers ,就因为这个电影呢,M就记住了这个词语 ,好,话说回来,这节课呢,我们主要呢,就是学习 ,和了解Transform这个CSS样式 ,这节课的重点有四个 ,就是要了解我们Transform样式里面的 ,四个属性分别是Translate ,Rotate ,Scale和Skew ,好,我们来看一看这四个属性分别都有一些什么作用 ,首先是Translate ,Translate呢,它是指定对象进行一个2D的平移 ,第一个参数呢,对应的就是X轴也就是我们所谓的横坐标了 ,?第二个参数是Y轴 ,?当然了,如果我们第二个参数为提供的话呢,它默认值是为零 ,那么这个样式怎么写呢 ,下面的例子看一下,Translate冒号,然后 ,Translate ,?再用括号来标注,前面是X轴后面是Y轴 ,大家也可以写一个 ,假如是10PX那就默认是 ,

横移10个像素 ,Y轴是不会平移的 ,好,我们去到DW里面能看一下这是一个什么样的样式 ,进入到DW我们还是新建一个Html ,创建 ,顺手呢,就把它给保存到我们的课程站点里面去 ,好,我们今天呢就用div ,?来做一个样式的一个讲解 ,我们先来看一下的就是Translate ,平移所以我们就给这个div叫平移好了 ,?为了方便我们观察呢,我们先给我们的div ,?写一些公共的样式 ,首先就是一个宽和高 ,都是100PX的 ,div ,?然后呢,我们给 ,?一个背景颜色 ,Background ,给一个灰色好了 ,?保存一下 ,F12 ,来到浏览器里面,好我们这个 ,灰颜色的div就好了 ,?当然因为后面还有其它三个总共有四个不同的属性,所以呢 ,?为了方便把它们给隔开我们来设置一个Margin,20px ,好,没有问题 ,?我们先来看我们将要学习的第一个 ,Transform ,也就是我们的Transform,Translate平移 ,看下它是一个什么效果 ,我们给这个叫做平移的div ,写一个Transform ,然后 ,设置Translate ,?播放里面我们可以平移20个像素 ,?逗号 ,?前面这个20是X轴的 ,?然后Y轴呢,我们可以 ,

给一个10PX ,好,最后结尾注意分号不要忘记了,我们保存来看一下 ,它是不是挪了一下 ,?当然可能不太明显,我们给大一点阿 ,?200和100好,我们来看一下,诶,这个就非常明显了 ,我们这个div直接从 ,左上角往右下角移了 ,横移了200个像素,下,向下移了100个像素 ,这个就是我们Translate一个用法 ,好,我们再接着看 ,?第二个Rotate,Rotate指定的是,对象的一个2D旋转 ,?然后需要有Transform origin ,

登录后查看更多
换一批

为你推荐

每周一练

立即参与

同学,小虎知道你非常努力的想学习!

老师录制课程真的也很辛苦

赞助一下吧

确定学习吗?

您每天可免费学习一个教程。

成为VIP可无限学习 !

成为VIP吧!

成为VIP吧!

您已经免费学习 1 个教程 !

我们录制教程很努力的,赞助下吧 !

升级VIP吧!

您已经学习 5 个教程啦!

我们录制教程很努力的,赞助升级下吧 !

您已经累计下载5个源文件


您在当前分类下不是VIP,赞助VIP享受无限下载


您已经累计下载5个素材文件


您在当前分类下不是VIP,赞助VIP享受无限下载


您已经累计下载5个源文件


您在当前分类下不是VIP,赞助VIP享受无限下载


您已经累计观看5个图文教程


您在当前分类下不是VIP,赞助VIP享受无限观看


学习后才能评价哦!

学习后才能提问哦!

获得30虎课币

评论提交成功,将在审核通过后显示

×

下载素材/源文件:

收藏成功
取消成功
特惠
充值
客户端
虎课桌面客户端
置顶播放器,边看边学习
虎课移动APP
支持离线缓存,随时随地学习
我的排行
建议意见
官方客服

官方客服

您可以与在线客服进行沟通或者拨打客服热线获得帮助

客服热线:021-80344319工作日:9:30-18:30

在线咨询:联系客服工作日:9:00-22:00

节假日:9:00-18:00

虎课积分
登录注册
使用手机号码登录
使用手机号码登录
手机号码格式错误
换一个
图形验证码错误,请重新输入
验证码错误,请重新输入
登录
已连续签到0
第一天
5个虎课币
第二天
10个虎课币
第三天
15个虎课币
第四天
20个虎课币
第五天
40个虎课币
第六天
20个虎课币
第七天
20个虎课币
立即签到
已签到
每周一重置签到奖励
已连续签到0
本周斩获110个虎课币,下周也要来哦
我知道了
已连续签到0
哎呀,签到失败了!
再次签到
哎呀,系统出现错误,请稍后重试!
上上签 · 今日宜学习
恭喜!签到成功,获得 10 个虎课币
.
书山有路勤为径,学海无涯苦作舟
— 唐代文学家 韩愈
虎课网 · 每天进步一点点
分享到