您现在的位置是:首页 > Javascript
当前栏目
CSS(CascadingStyle Sheets)样式更改——2D转换
2023-03-15 22:09:14 时间
前言
上篇文章主要讲述了CSS样式更改中的裁剪、Z-Index、清除、改变元素的特性基础知识,这篇文章我们来介绍下CSS样式更改中2D转换的基础用法。
2D转换
1).元素位移translate(左边,顶边)
- div
- {
- transform: translate(50px,100px);
- -ms-transform: translate(50px,100px); /* IE 9 */
- -webkit-transform: translate(50px,100px); /* Safari and Chrome */
- -o-transform: translate(50px,100px); /* Opera */
- -moz-transform: translate(50px,100px); /* Firefox */
- }
2).元素旋转rotate(角度)
- div
- {
- transform: rotate(10deg);
- -ms-transform: rotate(10deg); /* IE 9 */
- -webkit-transform: rotate(10deg); /* Safari and Chrome */
- -o-transform: rotate(10deg); /* Opera */
- -moz-transform: rotate(10deg); /* Firefox */
- }
- rotate()
- scale()
- skew()
- matrix()
3).元素缩放scale(宽度倍数,高度倍数)
- div
- {
- transform: scale(1,2);
- -ms-transform: scale(1,2); /* IE 9 */
- -webkit-transform: scale(1,2); /* Safari 和 Chrome */
- -o-transform: scale(1,2); /* Opera */
- -moz-transform: scale(1,2); /* Firefox */
- }
4).元素翻转给定的角度 skew(x,y)
- div
- {
- transform: skew(13deg,21deg);
- -ms-transform: skew(13deg,21deg); /* IE 9 */
- -webkit-transform: skew(13deg,21deg); /* Safari and Chrome */
- -o-transform: skew(13deg,21deg); /* Opera */
- -moz-transform: skew(13deg,21deg); /* Firefox */
- }
5).将前面所有方法进行组合matrix()
- div
- {
- transform:matrix(1.3,0.32,1.32,0.22,0.54,0.65);
- -ms-transform:matrix(1.3,0.32,1.32,0.22,0.54,0.65); /* IE 9 */
- -moz-transform:matrix(1.3,0.32,1.32,0.22,0.54,0.65); /* Firefox */
- -webkit-transform:matrix(1.3,0.32,1.32,0.22,0.54,0.65); /* Safari and Chrome */
- -o-transform:matrix(1.3,0.32,1.32,0.22,0.54,0.65); /* Opera */
- }
- 定义6个数的矩阵
6).2D过度到3D
- div{
- transform:rotate(1deg);
- -ms-transform:rotate(1deg); /* IE 9 */
- -moz-transform:rotate(1deg); /* Firefox */
- -webkit-transform:rotate(1deg); /* Safari 和 Chrome */
- -o-transform:rotate(1deg); /* Opera */
- }
- 它包含了所有的2D方法和3D方法,并且可以单个设置每一种的方法的x,y轴转向值,比如:
- rotate(angle) 定义 2D 旋转,在参数中规定角度。测试
- rotate3d(x,y,z,angle) 定义 3D 旋转
- rotateX(angle) 定义沿着 X 轴的 3D 旋转
- rotateY(angle) 定义沿着 Y 轴的 3D 旋转
- rotateZ(angle) 定义沿着 Z 轴的 3D 旋转
- 其它的都是差不多的用法,不过还有一个用法不同的就是:
- perspective(n) 为3D转换元素定义透视视图。
参考文档:W3C官方文档(CSS篇)
总结
这篇文章主要介绍了CSS样式更改篇中的2D转换基本设置,希望对大家的学习有帮助。
相关文章
- TiDB Binlog 组件正式开源
- 使用Visual Studio Code对Node.js进行断点调试
- 推荐!数据可视化的十种优秀JavaScript图表库
- Node.js在复杂集成场景下占据统治地位的五个理由
- 玩转Node.js单元测试
- Node.js中内存泄漏分析
- Angular对React:一场关于Web开发者支持率的史诗对决
- 热点推荐:什么是后端开发?
- 谈谈Spring boot 启动层面的开发
- 使用NodeJS将文件或图像上传到服务器
- 编写React组件的最佳实践
- JavaScript MV*框架最值得关注的七个亮点
- 前端开发指南:如何利用PHP Cake框架构建应用
- 基于React与Vue后,移动开源项目Weex如何定义未来
- NodeJS和C++之间的类型转换
- jQuery中的常用到的三十九个技巧
- 官宣|Google Developers中国网站发布!
- NodeJS和C++之间的类型转换
- .NET Core首例Office开源跨平台组件(NPOI Core)
- 如何写出漂亮的React组件