美文网首页
--- > css3-变形

--- > css3-变形

作者: 風隨風去 | 来源:发表于2017-04-22 19:13 被阅读0次

transform(变形)

CSS3中可以通过transform属性修改元素的变形、旋转、缩放、倾斜特性,在CSS3中transform主要包括以下几种:旋转rotate、倾斜skew、缩放scale和移动translate以及矩阵变形matrix

transform : none | <transform-function> [ <transform-function> ]*

transform中使用多个变形函数时需要有空格隔开

适用元素 transformable elements

rotate(旋转)

可以通过rotate使元素旋转一定的度数

transform:rotate(30deg);
  • 顺时针旋转一定角度, 单位是角度deg(degree)
  • 旋转之后元素仍占据原来位置,实际上所有的transform都是这样,缩放、位移等都不会改变元素占据的位置
  • 元素旋转的的基点默认是中心(坐标轴原点),可以通过transform-origin属性改变
transform:rotate(30deg); 
transform-origin: 0% 0%;

transform-origin的取值可以是top, bottom, left, right, center, 或百分比,或长度值

transform-origin属性对下面介绍的transform都有作用

坐标轴

matrix(矩阵)

理解CSS3 transform中的Matrix

工具

CSS3 Tool

transform多值的顺序问题

当transforrm属性同时拥有多个变换函数时,顺序的不同,得到的结果可能也会不同

<div class="item item1"></div>
<div class="item item2"></div>
.item{
  width: 100px;
  height: 100px;
  border: 1px solid #111;
  position: absolute;
  top: 300px;
  left: 300px;
}
.item2{
  transform: translate(130px) rotate(45deg);
}

先x轴移动130px, 然后旋转45度

.item2{
  transform: rotate(45deg) translate(130px);
}

先旋转45度, 然后x轴移动130px

我们会发现如果是先旋转, 然后x轴移动130px, 它不只是在x轴移动了, 在y轴也移动了, 这里个人的理解是旋转之后, 我们的参考坐标发生了变化,向这样

当旋转45度后,元素的整个坐标系都旋转了45度

表盘

<p data-height="266" data-theme-id="0" data-slug-hash="GZXLZL" data-default-tab="result" data-user="lulupy" data-embed-version="2" class="codepen">See the Pen <a href="http://codepen.io/lulupy/pen/GZXLZL/">GZXLZL</a> by lulu (<a href="http://codepen.io/lulupy">@lulupy</a>) on <a href="http://codepen.io">CodePen</a>.</p>
<script async src="//assets.codepen.io/assets/embed/ei.js"></script>

相关文章

  • css3-变形

    .css3-变形 transform 是css的变形属性,通过变形函数,设置具体的变形方式 scale()变形函数...

  • --- > css3-变形

    transform(变形) CSS3中可以通过transform属性修改元素的变形、旋转、缩放、倾斜特性,在CSS...

  • css3-过渡、变形、动画

    本文目录 1.过渡transition 2.2D变形transform 3.动画 animation 4.动画库之...

  • css3-转换/变形(transform)、过渡(transit

    转换(transform) 2D转换 translate(): translate.png rotate():...

  • 变形,变形

    这里没有废话之先上效果图。 这里没有废话之思路描述 1.确定你需要的变化的形状2.确定这个形状需要的关键点3.连点...

  • CSS3-背景

    复合属性 background 复合属性书写顺序不限,没被设置的值认为是默认值,需要做兼容的属性也可以在之后单独设...

  • CSS3-动画

    首先了解浏览器兼容问题 不同浏览器写法不同 当您在 @keyframes 中创建动画时,请把它捆绑到某个选择器,否...

  • CSS3-目录

    1 CSS3 兼容性 2 CSS3 选择器 3 CSS3 新加属性 4 CSS3 过渡动画 5 CSS3 变型 6...

  • css3-动画

    1.@keyframes 规则用于创建动画。在 @keyframes中规定某项 CSS样式,就能创建由当前样式逐渐...

  • CSS3-基础

    1. 结构标记 定义一个区域 定义独立的内容 定义页面内容之外的内容 定义导航链...

网友评论

      本文标题:--- > css3-变形

      本文链接:https://www.haomeiwen.com/subject/prrlpttx.html