保姆级解读！CSS属性transform变形+2D转换+3D转换实例+代码+解析——Web前端系列学习笔记
文章目录
- transfrom
- 2D转换
- 案例代码
- 效果图
- 元素变形原点
- 3D转换
- 3D转换——案例
- 案例代码
transfrom
transform，翻译成中文的含义是“改变，使…变形；转换”，用于向元素应用2D或3D 转换。
transform属性的基本语法如下所示：
transform：none | transform-functions;
属性一：默认值为none，适用于内联元素和块元素，表示不进行变形。
属性二：用于设置变形函数，可以是一个或多个变形函数列表。
2D转换
transform-functions的常用于2D转换的函数说明如下表所示。
案例代码
<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title>CSS3 2D转换</title><style>.demo{margin: 25px;padding: 0;width: 150px;height: 50px;background-color: #2bab79;font-weight: bold;font-size: larger;float: left;}.trans1{transform:rotate(30deg);}.trans2{transform:skew(30deg);}.trans3{transform:scale(0.8);}.trans4{transform:translate(5px,50px);}/*教材元素旋转对比截图部分的代码*//*.demo{*//*margin: 50px;*//*padding:0px;*//*width: 150px;*//*height: 50px;*//*background-color: rgba(255, 177, 81, 0.02);*//*font-weight: bold;*//*font-size: larger;*//*border: 1px dashed;*//*}*//*.trans{*//*margin: 0px;*//*padding: 0;*//*width: 150px;*//*height: 50px;*//*background-color: #2bab79;*//*transform:rotate(30deg) ;*//*transform-origin: left 0 0 ;*//*}*/</style>
</head>
<body>
<div class="demo">不设置变形</div>
<div class="demo trans1">rotate(30deg)</div>
<div class="demo trans2">skew(30deg)</div>
<div class="demo trans3">scale(0.8)</div>
<div class="demo trans4">translate(5,50px)</div>
<!--教材元素旋转对比截图部分的代码-->
<!--<div class="demo"><div class="trans">rotate(30deg)</div></span></div>-->
</body>
</html>
效果图
元素变形原点
元素的变形都有一个原点，元素围绕着这个点进行变形或者旋转，默认的起始位置是元素的中心位置。
CSS 变形使用transform-origin属性指定元素变形基于的原点，语法格式具体如下：
transform-origin: x-axis y-axis z-axis;
transform-origin最多接受三个值，分别是x轴、y轴和z轴的偏移量。
transform-origin的参数说明如下表所示。
注意：transform-origin的三个参数均为可选参数，参数值为0px时可以省略不写。
3D转换
3D 变形是指某个元素围绕其x轴、y轴、z轴进行旋转，transform-functions的常用于3D转换的函数说明如下表所示。
3D转换——案例
perspective属性的透视效果就是用于实现视觉上的3D效果的，接下来看一个典型的案例——立方体，页面效果如下所示。
案例代码
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>CSS 3D转换</title><style>body {margin: 0;padding: 0;background-color: #F7F7F7;}.box {width: 200px;height: 200px;text-align: center;line-height: 200px;font-size: 24px;margin: 100px auto;position: relative;perspective: 1000px;transform-style: preserve-3d;transform: rotateX(-30deg) rotateY(30deg);}.front, .back, .left, .right, .top , .bottom {position: absolute;width: 100%;height: 100%;left: 0;top: 0;opacity: 0.5;}.front {background-color: pink;transform: translateZ(100px);}.left {background-color: green;transform: rotateY(90deg) translateZ(-100px);}.right {background-color: red;transform: rotateY(-90deg) translateZ(-100px);}.top {background-color: blue;transform: rotateX(90deg) translateZ(100px);}.bottom {background-color: yellow;transform: rotateX(-90deg) translateZ(100px);}.back {background-color: purple;transform: translateZ(-100px);}</style>
</head>
<body>
<div class="box"><div class="front">front</div><div class="back">back</div><div class="left">left</div><div class="right">right</div><div class="top">top</div><div class="bottom">bottom</div>
</div>
</body>
</html>
保姆级解读！CSS属性transform变形+2D转换+3D转换实例+代码+解析——Web前端系列学习笔记相关推荐
- 【详细解读】CSS渐变用法——Web前端系列学习笔记
文章目录 线性渐变 属性解析 实例代码 效果图 径向渐变 属性解析 示例代码 效果图 多学一招:重复渐变 线性渐变 属性解析 通过关键词来确定渐变的方向.默认值为top(从上向下),取值范围是 [le ...
- CSS过渡属性transitions详细解读——Web前端系列学习笔记
文章目录 transition teansition-property 属性名称 transtion-duration 花费时间 transition –timing -function 时间曲线 t ...
- 详细解读CSS链接属性——Web前端系列学习笔记
在实际开发中,网页中的链接有四种状态,具体如下所示: a:link:超级链接的初始状态. a:hover:把鼠标放上去时悬停的状态 . a:active :是鼠标点击时. a:visited:是访问过 ...
- 详细解读CSS优先级——Web前端系列学习笔记
文章目录 样式优先级 选择器的优先级 总结 样式优先级 CSS优先级即是指CSS样式在浏览器中被解析的权重不同. 多重样式(Multiple Styles):如果外部样式.内部样式和内联样式同时应用于 ...
- 【详解】CSS阴影用法——Web前端系列学习笔记
3. CSS阴影和渐变 盒阴影 对象选择器 {box-shadow:投影方式|| X轴偏移量|| Y轴偏移量 ||阴影模糊半径 || 阴影扩展半径 ||阴影颜色 } 投影方式:此参数是一个可选值,如果 ...
- 详解CSS三大特性之层叠性、继承性和重要性——Web前端系列学习笔记
1. CSS层叠性 CSS层叠性就是在HTML文件中对于同一个标签元素可以有多个CSS样式存在,当有相同权重的样式存在时,会根据这些CSS样式的前后顺序来决定,处于最后面的CSS样式会被应用,示例代码 ...
- 保姆级教程 CSS 知识点梳理大全，超详细！！！
保姆级教程 CSS 知识点梳理大全,超详细!!! ✴️大家好,我是王同学,好久不见,趁着假期王同学把CSS 知识点梳理了一遍 ✴️如果对你有帮助就给我点个赞吧,这样我们就互不相欠了 ✴️星光不负赶路人 ...
- CSS3 Transform变形(2D转换)
Transform:对元素进行变形: Transition:对元素某个属性或多个属性的变化,进行控制(时间等),类似flash的补间动画.但只有两个关键贞.开始,结束. Animation:对元素某个 ...
- CSS学习笔记 07、2D与3D转换
文章目录 前言 一.2D变形 1.1.旋转变形 transform: rotate(度数)-旋转角度,默认中心点旋转 transform-origin属性(定义旋转点) 1.2.缩放变形 transf ...
最新文章
- 【ACM】杭电OJ 2040
- nagios自定义监控API插件
- 乐高ev3搭建图_乐高EV3作品|机械夹子(二)
- CentOS7 安装chrome浏览器和ChromeDriver 及 python脚本调用chrome浏览器
- u3d 动态 随机 地图_我的世界1.12.2模组教程：VoxelMap小地图新老玩家辅助神器
- [C++学习笔记](double*)malloc(n * sizeof(double))；
- 图像连通域检测的2路算法Code
- 【IT笔试面试题整理】二叉树中和为某一值的路径--所有可能路径
- linux常用命令大全(转)好东西要分享
- 解决：RabbitMQ 连接报错：amqp.AmqpConnectException: java.net.ConnectException: Connection refused: connect
- 计算机二级知识点速记,计算机等考《二级MS+Office高级应用》高频考点速记
- scrapy中自定义过滤规则以及start_urls不进过滤器的问题
- Django model select的各种用法详解
- 外资企业财务管理的内部控制问题分析
- Scala3下载及安装下载地址（Mac安装Scala）
- 仿钉钉考勤统计圆形控件
- destoon php.ini,解决Destoon下载远程图片失败的错误
- Windows Media Player Network Sharing Service 启动失败
- 页面局部刷新( ScriptManager 和 UpdatePanel)(转)
- 本地电脑做网站服务器，无需公网IP穿透映射80端口