〖大前端 - 基础入门三大核心之CSS篇⑳〗- 2D变形

Posted 不渴望力量的哈士奇

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了〖大前端 - 基础入门三大核心之CSS篇⑳〗- 2D变形相关的知识,希望对你有一定的参考价值。

  • 作者:不渴望力量的哈士奇(哈哥),十余年工作经验, 跨域学习者,从事过全栈研发、产品经理等工作,目前任某金融品类App负责人。
  • 荣誉:2022年度博客之星Top4博客专家认证、全栈领域优质创作者、新星计划导师“星荐官共赢计划” 发起人
  • 现象级专栏《白宝书系列》作者文章知识点浅显易懂且不失深度TFS-CLUB社区创立者旨在以“赋能 共赢”推动共建技术人成长共同体



文章目录

变形是CSS3中新增的一个非常有意思的属性,可以将元素进行2D变形和3D变形,例如旋转、缩放、位移等;还可以结合过渡实现一些特别神奇的动画效果。接下来就一起来了解css3这个强大又有趣的功能吧。


⭐️ 2D变形

接下来就让我们来学习一下,如何实现 2D变形吧。


🌟 旋转变形

transform:变形;

旋转变形:trasform: rotate();



度数为正,表示顺时针旋转;度数为负,表示逆时针旋转;

下面看几个例子:




🌟 transform-origin属性

transform-origin属性用来自定义变换原点。

旋转的时候默认是围绕自己的中心点旋转的。

围绕自己的左上角旋转:transform-origin:0 0;

这个属性用到的比较少,我们看一个简单的例子即可:




🌟 缩放变形

缩放变形:transform: scale();



缩放倍数大于1表示放大,小于1表示缩小

下面直接看例子:



缩放变形也可以使用transform-origin来自定义变换的原点;默认是从中心点。




🌟 斜切变形

斜切变形:transform: skew();



斜切变形用的也不多,下面直接看例子来观察斜切的效果:




🌟 位移变形

位移其实就是位置的移动,和相对定位非常的像。相对定位兼容到IE6,但是位移变形兼容到IE9,是很新的属性。位移变形也会”老家留坑“,”形影分离“。

位移变形:transform: translate();



下面直接看例子:



前端相关书籍

前端基础:

CSS世界

CSS揭秘

图解CSS3: 核心技术与案例实战 

javaScript从入门到精通(标准版)

javaScript权威指南

CSS权威指南

Web前端工程师修练之道

HTML5+CSS3从入门到精通

 

前端基础实战:

CSS高效开发实战 CSS 3 LESS SASS Bootstrap Foundation

jquery实战从入门到精通

CSS设计指南

html5+JavaScript动画基础

Git版本控制管理

精通正则表达式

正则表达式经典实例

JavaScript DOM 编程艺术

精通CSS高级Web标准解决方案

响应式Web设计HTML5和CSS3实战

 

前端进阶:

指尖上行 移动前端开发设计进阶之路

javaScript高效图形编程

单页Web应用 JavaScript从前端到后端

深入理解ES6

ES6标准入门

学习javaScript数据结构与算法

精通Git

JavaScript专家编程

JavaScript设计模式与开发实战

设计模式之禅

html5数据推送应用开发

JavaScript框架设计

JavaScript启示录

JavaScript高级程序设计

 

前端类库:

jquery权威指南

JQuery EasyUI开发指南

Angular 从零到一

Angular入门与进阶

React学习手册

Three.js开发指南:WebGL的javascript 3D库

React Native移动开发实战

React Native跨台移动应用

Bootstrap web设计与开发实战

Ionic实战:基于AngularJS的移动混合应用开发

精通D3.js

Vue.js指南

React全栈

vue.js实战

vue权威指南

全端WEB开发

WEBGL入门指南

vue前端开发

精进:如何成为一个很厉害的人

深入浅出Ext JS

锋利的jquery

Node.js权威指南

Angluar JS权威指南

Angluar JS实战

深入浅出Node js

 

前端工程化:

深入浅出Webpack Webpack入门教程书籍

Web前端自动化构建:Gulp、Bower和Yeoman开发指南

Sass与Compass实战

 

性能调优:

高效前端:WEB高效编程与优化实战

CSS重构 样式表性能调优

编写可测试的JavaScript代码

WEB前端开发最佳实战

javaScript性能优化:度量、监控与可视化

编写高质量javaScript代码的68个有效方法

 

WEB安全:

WEB安全开发指南

Web开发的身份和数据安全

SQL注入攻击与防御

 

编程思想:

Flux架构

函数式编程思维

工程思维

SOA架构-服务和微服务分析及设计

Serverless架构 无服务器单页应用开发

Web API设计与开发

微服务设计

程序员修练之道

 

辅助:

枕边算法书

程序员的英语

刻意练习:如何从新手到大师

别告诉我你会记笔记

高效人士用超级笔记术

技巧:如何用一年时间获得十年的经验

你只是看起来很努力

JSON必知必会

网页色彩搭配设计师必备宝典

中文版 Photoshop CC 基础培训教程

代码简洁之道

过目不忘的读书法

用户体验要素

以上是关于〖大前端 - 基础入门三大核心之CSS篇⑳〗- 2D变形的主要内容,如果未能解决你的问题,请参考以下文章

CSS基础篇之入门介绍及语法应用

黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端前端视频教程-css3

Web前端一文带你吃透CSS(完结篇)

Web前端三大核心技术之HTML

前端相关书籍

python学习_day59_前端基础之jQuery入门2