babel css3新特性_css3 transform属性多值的顺序问题

对于transform属性的多值的顺序问题，我自己就被困扰过。后来知道了跟顺序有关，但是不知道为什么。我想应该很多人跟我以前一样，知其然不知其所以然。如果不知道的，也许这篇文章会对大家有所帮助。

先来看一个例子。

html代码:

css代码：

body {

margin: 0;

}

div {

width:100px;

height:100px;

background:red;

}

#red1 {

transform: rotate(45deg);

}

#red2 {

transform: rotate(45deg) translate(100px, 100px);

}

红框一transform属性只有一个值rotate(45deg)，红框二多了一个值translate(100px, 100px)，水平和竖直都平移100px，但是从图中可以看到红框2只有竖直方向有位移。这是怎么回事？

其实，当旋转45度后，元素的整个坐标系都旋转了45度，如下图：

图1就是正常的坐标系，图2就是旋转45度后的坐标系。所以红框二就按旋转后的坐标系进行平移。因为我设置的值比较特殊，所以只有在竖直方向有位移。通过计算红框二竖直向下平移了100√2px，也就是红框对角线的长度。

我们再来看一个例子。

html代码:

css代码：

body {

margin: 0;

}

div {

width:100px;

height:100px;

position: absolute;

top: 50px;

left: 100px;

}

#red {

background:red;

transform: rotate(45deg) translate(100px, 100px);

}

#green {

background:green;

transform: translate(100px, 100px) rotate(45deg);

}

图中可以看到，值的顺序对元素位置的影响。通过上面的介绍知道，红框先旋转再平移，即先旋转坐标系再平移，而绿框先按正常的坐标系平移，再旋转，所以它们的位置就不同了。

我们可以举一反三，比如3d旋转等都可以按上面的方法去分析。

(完)

babel css3新特性_css3 transform属性多值的顺序问题相关推荐

babel css3新特性_2018年面试前端总结
再有两个月,2018就快过完了,因而有必要在年末对2018年的前端学习做一个总结,本文主要从前端面试中的一些基础知识来对前端进行相关的总结.本文根据网络面试题进行总结. 基础知识本部分主要从以下几个 ...
babel css3新特性_前端总结（后续不断更新）
1, reflow和repaint:回流和重绘. 回流:renderTree 重建. 重绘:外观样式风格进行更新.(color更改) 页面在第一次加载时候必须进行了回流操作,有回流一定伴随重绘,但是重 ...
CSS3新特性详解(三)：CSS3 2D转换和3D转换 transform 变形使用详解
关于CSS3新特性,在上篇博文中"CSS3新特性详解(二):CSS3 字体@font-face详解.如何创建和修改woff字体文件及text-shadow等文本效果",讨论了C ...
HTML5和CSS3新特性(完整版)
css3新特性选择器背景和边框文本效果 2D/3D 转换 - 变形(transform).过渡(transtion).动画(animation) 1.选择器 :last-child /* 选择元 ...
Html5、CSS3新特性
h5的新特性? 1.新增一些语义化标签 <article> <section> <aside><header> <footer><n ...
CSS3新特性——新增选择器，2D/3D转换，动画
CSS3新特性--新增选择器,2D/3D转换,动画欢迎大家去博客冰山一树Sankey,浏览效果更好.直接右上角搜索该标题即可博客园主页:博客园主页-冰山一树Sankey CSDN主页:CSDN主页 ...
css3新特性和其他常见问题（三）
css3新特性参考网站 css3选择器属性选择器(IE7及以上支持) E[attr]表示存在attr属性即可: E[attr=val]表示属性值完全等于val E[attr~=val]表示的一个单 ...
web前端 --- CSS（04） -- 盒子模型、div+css网页布局、css3新特性
盒子模型 (1)网页标签分类: 行内元素: 块级元素:有宽高,可以设置大小,同时不会让其他块元素默认占据当前行 (2)内边距: 内容和边线之间存在空白区域,空白区域被称为:内边距(padding) 盒 ...
山东标梵Biaofun详解CSS3新特性
CSS3 新特性 CSS 盒模型设置一个元素的背景颜色,背景颜色会填充哪些区域 margin/padding 设置百分比是相对谁的 link 和 @import 的区别 CSS 选择器的解析规则 C ...
CSS3新特性（摘要）
目录 CSS3 简介 CSS3规则 @media @font-face @keyframes CSS3 函数 rgba linear-gradient repeating-linear-gradien ...

babel css3新特性_css3 transform属性多值的顺序问题

babel css3新特性_css3 transform属性多值的顺序问题相关推荐

最新文章

热门文章