精通HTML5+CSS3需要学什么?

精通HTML5+CSS3需要学什么?,第1张

精通HTML5+CSS3需要学什么?主要学习vscode编辑器基本使用、HTML5新增标签、CSS3新增选择器及案例、2D转换及相关案例实现、3D转换和旋转木马案例等知识点。

一、vscode编辑器基本使用vscode 基本使用vscode插件安装

二、 HTML5新增标签什么是HTML5HTML5新增标签多媒体音频标签多媒体视频标签HTML5新增input标签HTML5新增表单属性

三、CSS3新增选择器及案例CSS3属性选择器(上)CSS3结构伪类选择器(上)nth-child(n)nth-child和nth-of-type的区别CSS3伪元素选择器伪元素选择器案例

四、2D转换及相关案例实现2D转换之translate让一个盒子水平垂直居中2D转换之rotateCSS3 三角设置转换中心点旋转中心点案例2D转换之scale图片放大案例分页按钮案例2D转换综合写法以及顺序问题CSS3动画基本使用动画序列CSS3动画常见属性CSS3动画简写大数据热点图案例速度曲线之steps步长16-奔跑的熊大案例

五、3D转换和旋转木马案例认识3D转换3D转换translate3d透视perspectivetranslateZ3D旋转rotateX3D旋转rotateY3D旋转rotateZ3D呈现transform-style两面翻转盒子案例3D导航栏综合案例-旋转木马案例浏览器私有前缀以及总结

可以使用css3中的rotate实现

实际的旋转效果是这样:

rotate中的 60deg 表示按最原始的位置,顺时针旋转60°

w3school 里面有更详细用法,可以2D旋转、3D旋转

可以参考:网页链接

动画效果可以通过js改变rotate中传入的值来实现


欢迎分享,转载请注明来源:内存溢出

原文地址: https://www.outofmemory.cn/zaji/6172422.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-03-17
下一篇 2023-03-17

发表评论

登录后才能评论

评论列表(0条)

保存