css3transform应用

最新推荐文章于 2024-04-22 20:04:35 发布
最新推荐文章于 2024-04-22 20:04:35 发布
阅读量343 收藏 1
点赞数 1
分类专栏： 网页设计 文章标签： 网页设计 css3 transform translate

1.旋转 rotate()

旋转rotate()函数：通过指定的角度参数使元素相对原点进行旋转。它主要在二维空间内进行操作，设置一个角度值，用来指定旋转的幅度。

  • 如果这个值为正值，元素相对原点中心顺时针旋转；

  • 如果这个值为负值，元素相对原点中心逆时针旋转。
<code class="language-html hljs  has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;"><!--html代码--></span>
<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">div</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">class</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"wrapper"</span>></span></code><code class="language-html hljs  has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">  <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">div</span>></span><span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">div</span>></span>
<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">div</span>></span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">
</li><li style="box-sizing: border-box; padding: 0px 5px;">
</li><li style="box-sizing: border-box; padding: 0px 5px;">
</li><li style="box-sizing: border-box; padding: 0px 5px;">
</li></ul>
<code class="language-css hljs  has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">/*css代码*/</span>
<span class="hljs-class" style="box-sizing: border-box;">.wrapper</span> <span class="hljs-rules" style="box-sizing: border-box;">{
  <span class="hljs-rule" style="box-sizing: border-box;"><span class="hljs-attribute" style="box-sizing: border-box;">width</span>:<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 102, 102);"> <span class="hljs-number" style="box-sizing: border-box;">200</span>px</span></span>;
  <span class="hljs-rule" style="box-sizing: border-box;"><span class="hljs-attribute" style="box-sizing: border-box;">height</span>:<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 102, 102);"> <span class="hljs-number" style="box-sizing: border-box;">200</span>px</span></span>;
  <span class="hljs-rule" style="box-sizing: border-box;"><span class="hljs-attribute" style="box-sizing: border-box;">border</span>:<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 102, 102);"> <span class="hljs-number" style="box-sizing: border-box;">1</span>px dotted red</span></span>;
  <span class="hljs-rule" style="box-sizing: border-box;"><span class="hljs-attribute" style="box-sizing: border-box;">margin</span>:<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 102, 102);"> <span class="hljs-number" style="box-sizing: border-box;">100</span>px auto</span></span>;
<span class="hljs-rule" style="box-sizing: border-box;">}</span></span>
<span class="hljs-class" style="box-sizing: border-box;">.wrapper</span> <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;">div</span> <span class="hljs-rules" style="box-sizing: border-box;">{
  <span class="hljs-rule" style="box-sizing: border-box;"><span class="hljs-attribute" style="box-sizing: border-box;">width</span>:<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 102, 102);"> <span class="hljs-number" style="box-sizing: border-box;">200</span>px</span></span>;
  <span class="hljs-rule" style="box-sizing: border-box;"><span class="hljs-attribute" style="box-sizing: border-box;">height</span>:<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 102, 102);"> <span class="hljs-number" style="box-sizing: border-box;">200</span>px</span></span>;
  <span class="hljs-rule" style="box-sizing: border-box;"><span class="hljs-attribute" style="box-sizing: border-box;">background</span>:<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 102, 102);"> orange</span></span>;
  <span class="hljs-rule" style="box-sizing: border-box;"><span class="hljs-attribute" style="box-sizing: border-box;">-webkit-transform</span>:<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 102, 102);"> <span class="hljs-function" style="box-sizing: border-box;">rotate(<span class="hljs-number" style="box-sizing: border-box;">45</span>deg)</span></span></span>;
  <span class="hljs-rule" style="box-sizing: border-box;"><span class="hljs-attribute" style="box-sizing: border-box;">transform</span>:<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 102, 102);"> <span class="hljs-function" style="box-sizing: border-box;">rotate(<span class="hljs-number" style="box-sizing: border-box;">45</span>deg)</span></span></span>;
<span class="hljs-rule" style="box-sizing: border-box;">}</span></span></code>
效果：

2.扭曲 skew()

扭曲skew()函数能够让元素倾斜显示。它可以将一个对象以其中心位置围绕着X轴和Y轴按照一定的角度倾斜。

  • rotate()函数只是旋转，而不会改变元素的形状；
  • skew()函数不会旋转，而只会改变元素的形状。

Skew()具有三种情况：

①skew(x,y)使元素在水平和垂直方向同时扭曲（X轴和Y轴同时按一定的角度值进行扭曲变形）；


第一个参数对应X轴，第二个参数对应Y轴。 
如果第二个参数未设置，则值为0，也就是Y轴方向上无斜切。

skewX(x)仅使元素在水平方向扭曲变形（X轴扭曲变形）；


skewY(y)仅使元素在垂直方向扭曲变形（Y轴扭曲变形）


例如： 
<code class="language-html hljs  has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;"><!--html代码--></span>
<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">div</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">class</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"wrapper"</span>></span>
  <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">div</span>></span>我变成平形四边形<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">div</span>></span>
<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">div</span>></span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">
</li><li style="box-sizing: border-box; padding: 0px 5px;">
</li><li style="box-sizing: border-box; padding: 0px 5px;">
</li><li style="box-sizing: border-box; padding: 0px 5px;">
</li></ul>
<code class="language-css hljs  has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">/*css代码*/</span>
<span class="hljs-class" style="box-sizing: border-box;">.wrapper</span> <span class="hljs-rules" style="box-sizing: border-box;">{
  <span class="hljs-rule" style="box-sizing: border-box;"><span class="hljs-attribute" style="box-sizing: border-box;">width</span>:<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 102, 102);"> <span class="hljs-number" style="box-sizing: border-box;">300</span>px</span></span>;
  <span class="hljs-rule" style="box-sizing: border-box;"><span class="hljs-attribute" style="box-sizing: border-box;">height</span>:<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 102, 102);"> <span class="hljs-number" style="box-sizing: border-box;">100</span>px</span></span>;
  <span class="hljs-rule" style="box-sizing: border-box;"><span class="hljs-attribute" style="box-sizing: border-box;">border</span>:<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 102, 102);"> <span class="hljs-number" style="box-sizing: border-box;">2</span>px dotted red</span></span>;
  <span class="hljs-rule" style="box-sizing: border-box;"><span class="hljs-attribute" style="box-sizing: border-box;">margin</span>:<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 102, 102);"> <span class="hljs-number" style="box-sizing: border-box;">30</span>px auto</span></span>;
<span class="hljs-rule" style="box-sizing: border-box;">}</span></span>
<span class="hljs-class" style="box-sizing: border-box;">.wrapper</span> <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;">div</span> <span class="hljs-rules" style="box-sizing: border-box;">{
  <span class="hljs-rule" style="box-sizing: border-box;"><span class="hljs-attribute" style="box-sizing: border-box;">width</span>:<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 102, 102);"> <span class="hljs-number" style="box-sizing: border-box;">300</span>px</span></span>;
  <span class="hljs-rule" style="box-sizing: border-box;"><span class="hljs-attribute" style="box-sizing: border-box;">height</span>:<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 102, 102);"> <span class="hljs-number" style="box-sizing: border-box;">100</span>px</span></span>;
  <span class="hljs-rule" style="box-sizing: border-box;"><span class="hljs-attribute" style="box-sizing: border-box;">line-height</span>:<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 102, 102);"> <span class="hljs-number" style="box-sizing: border-box;">100</span>px</span></span>;
  <span class="hljs-rule" style="box-sizing: border-box;"><span class="hljs-attribute" style="box-sizing: border-box;">text-align</span>:<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 102, 102);"> center</span></span>;
  <span class="hljs-rule" style="box-sizing: border-box;"><span class="hljs-attribute" style="box-sizing: border-box;">color</span>:<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 102, 102);"> <span class="hljs-hexcolor" style="box-sizing: border-box;">#fff</span></span></span>;
  <span class="hljs-rule" style="box-sizing: border-box;"><span class="hljs-attribute" style="box-sizing: border-box;">background</span>:<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 102, 102);"> orange</span></span>;
  <span class="hljs-rule" style="box-sizing: border-box;"><span class="hljs-attribute" style="box-sizing: border-box;">-webkit-transform</span>:<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 102, 102);"> <span class="hljs-function" style="box-sizing: border-box;">skew(<span class="hljs-number" style="box-sizing: border-box;">45</span>deg)</span></span></span>;
  <span class="hljs-rule" style="box-sizing: border-box;"><span class="hljs-attribute" style="box-sizing: border-box;">-moz-transform</span>:<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 102, 102);"><span class="hljs-function" style="box-sizing: border-box;">skew(<span class="hljs-number" style="box-sizing: border-box;">45</span>deg)</span> 
  transform:<span class="hljs-function" style="box-sizing: border-box;">skew(<span class="hljs-number" style="box-sizing: border-box;">45</span>deg)</span></span></span>;
<span class="hljs-rule" style="box-sizing: border-box;">}</span></span></code>
<ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">
</li></ul>

效果：


3.缩放 scale()

缩放 scale()函数 让元素根据中心原点对对象进行缩放。

缩放 scale具有三种情况

scale(X,Y)使元素水平方向和垂直方向同时缩放（也就是X轴和Y轴同时缩放）


例子
-webkit-transform: scale(1.5,0.5) ; -moz-transform:scale(1.5,0.5) transform: scale(1.5,0.5) ;
注意： Y是一个可选参数，如果没有设置Y值，则表示X，Y两个方向的缩放倍数是一样的。

scaleX(x)元素仅水平方向缩放（X缩放）
scaleY(y)元素仅垂直方向缩放 （Y轴缩放） 

<code class="language-html hljs  has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;"><!--html代码--></span>
<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">div</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">class</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"wrapper"</span>></span>
  <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">div</span>></span>我将放大1.5倍<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">div</span>></span>
<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">div</span>></span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">
</li><li style="box-sizing: border-box; padding: 0px 5px;">
</li><li style="box-sizing: border-box; padding: 0px 5px;">
</li><li style="box-sizing: border-box; padding: 0px 5px;">
</li></ul><div class="save_code tracking-ad" data-mod="popu_249" style="box-sizing: border-box; position: absolute; width: 105px; height: 60px; right: 30px; top: 5px; color: rgb(255, 255, 255); cursor: pointer; z-index: 2;"><a target=_blank target="_blank" style="box-sizing: border-box; color: rgb(12, 137, 207);"><img src="http://static.blog.csdn.net/images/save_snippets.png" style="border: none; box-sizing: border-box;" alt="" /></a></div>
<code class="language-css hljs  has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">/*css代码*/</span>
<span class="hljs-class" style="box-sizing: border-box;">.wrapper</span> <span class="hljs-rules" style="box-sizing: border-box;">{
  <span class="hljs-rule" style="box-sizing: border-box;"><span class="hljs-attribute" style="box-sizing: border-box;">width</span>:<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 102, 102);"> <span class="hljs-number" style="box-sizing: border-box;">200</span>px</span></span>;
  <span class="hljs-rule" style="box-sizing: border-box;"><span class="hljs-attribute" style="box-sizing: border-box;">height</span>:<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 102, 102);"> <span class="hljs-number" style="box-sizing: border-box;">200</span>px</span></span>;
  <span class="hljs-rule" style="box-sizing: border-box;"><span class="hljs-attribute" style="box-sizing: border-box;">border</span>:<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 102, 102);"><span class="hljs-number" style="box-sizing: border-box;">2</span>px dashed red</span></span>;
  <span class="hljs-rule" style="box-sizing: border-box;"><span class="hljs-attribute" style="box-sizing: border-box;">margin</span>:<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 102, 102);"> <span class="hljs-number" style="box-sizing: border-box;">100</span>px auto</span></span>;
<span class="hljs-rule" style="box-sizing: border-box;">}</span></span>
<span class="hljs-class" style="box-sizing: border-box;">.wrapper</span> <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;">div</span> <span class="hljs-rules" style="box-sizing: border-box;">{
  <span class="hljs-rule" style="box-sizing: border-box;"><span class="hljs-attribute" style="box-sizing: border-box;">width</span>:<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 102, 102);"> <span class="hljs-number" style="box-sizing: border-box;">200</span>px</span></span>;
  <span class="hljs-rule" style="box-sizing: border-box;"><span class="hljs-attribute" style="box-sizing: border-box;">height</span>:<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 102, 102);"> <span class="hljs-number" style="box-sizing: border-box;">200</span>px</span></span>;
  <span class="hljs-rule" style="box-sizing: border-box;"><span class="hljs-attribute" style="box-sizing: border-box;">line-height</span>:<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 102, 102);"> <span class="hljs-number" style="box-sizing: border-box;">200</span>px</span></span>;
  <span class="hljs-rule" style="box-sizing: border-box;"><span class="hljs-attribute" style="box-sizing: border-box;">background</span>:<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 102, 102);"> orange</span></span>;
  <span class="hljs-rule" style="box-sizing: border-box;"><span class="hljs-attribute" style="box-sizing: border-box;">text-align</span>:<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 102, 102);"> center</span></span>;
  <span class="hljs-rule" style="box-sizing: border-box;"><span class="hljs-attribute" style="box-sizing: border-box;">color</span>:<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 102, 102);"> <span class="hljs-hexcolor" style="box-sizing: border-box;">#fff</span></span></span>;
<span class="hljs-rule" style="box-sizing: border-box;">}</span></span>
<span class="hljs-class" style="box-sizing: border-box;">.wrapper</span> <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;">div</span><span class="hljs-pseudo" style="color: rgb(0, 0, 0); box-sizing: border-box;">:hover</span> <span class="hljs-rules" style="box-sizing: border-box;">{
  <span class="hljs-rule" style="box-sizing: border-box;"><span class="hljs-attribute" style="box-sizing: border-box;">opacity</span>:<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 102, 102);"> .<span class="hljs-number" style="box-sizing: border-box;">5</span></span></span>;
  <span class="hljs-rule" style="box-sizing: border-box;"><span class="hljs-attribute" style="box-sizing: border-box;">-webkit-transform</span>:<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 102, 102);"> <span class="hljs-function" style="box-sizing: border-box;">scale(<span class="hljs-number" style="box-sizing: border-box;">1.5</span>)</span></span></span>;
  <span class="hljs-rule" style="box-sizing: border-box;"><span class="hljs-attribute" style="box-sizing: border-box;">-moz-transform</span>:<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 102, 102);"><span class="hljs-function" style="box-sizing: border-box;">scale(<span class="hljs-number" style="box-sizing: border-box;">1.5</span>)</span>
  transform: <span class="hljs-function" style="box-sizing: border-box;">scale(<span class="hljs-number" style="box-sizing: border-box;">1.5</span>)</span></span></span>;
<span class="hljs-rule" style="box-sizing: border-box;">}</span></span></code><code class="language-css hljs  has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><img src="https://img-blog.csdn.net/20160705001557410?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="" />
</code>
注意: scale()的取值默认的值为1，当值设置为0.01到0.99之间的任何值，作用使一个元素缩小；而任何大于或等于1.01的值，作用是让元素放大。

4.位移 translate()

translate()函数可以将元素向指定的方向移动，类似于position中的relative。或以简单的理解为，使用translate()函数，可以把元素从原来的位置移动，而不影响在X、Y轴上的任何Web组件。

translate我们分为三种情况：

①translate(x,y)水平方向和垂直方向同时移动（也就是X轴和Y轴同时移动）


translateX(x)仅水平方向移动

translateY(y)仅垂直方向移动

例子：

通过translate()函数将让不知道宽度和高度的元素实现水平、垂直居中。

<code class="language-html hljs  has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">div</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">class</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"wrapper"</span>></span>
我不知道我的宽度和高是多少，我要实现水平垂直居中    
<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">div</span>></span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li></ul>
<code class="language-css hljs  has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">/*css代码*/</span>
<span class="hljs-class" style="box-sizing: border-box;">.wrapper</span> <span class="hljs-rules" style="box-sizing: border-box;">{
  <span class="hljs-rule" style="box-sizing: border-box;"><span class="hljs-attribute" style="box-sizing: border-box;">padding</span>:<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 102, 102);"> <span class="hljs-number" style="box-sizing: border-box;">20</span>px</span></span>;
  <span class="hljs-rule" style="box-sizing: border-box;"><span class="hljs-attribute" style="box-sizing: border-box;">background</span>:<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 102, 102);">orange</span></span>;
  <span class="hljs-rule" style="box-sizing: border-box;"><span class="hljs-attribute" style="box-sizing: border-box;">color</span>:<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 102, 102);"><span class="hljs-hexcolor" style="box-sizing: border-box;">#fff</span></span></span>;
  <span class="hljs-rule" style="box-sizing: border-box;"><span class="hljs-attribute" style="box-sizing: border-box;">position</span>:<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 102, 102);">absolute</span></span>;
  <span class="hljs-rule" style="box-sizing: border-box;"><span class="hljs-attribute" style="box-sizing: border-box;">top</span>:<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 102, 102);"><span class="hljs-number" style="box-sizing: border-box;">50</span>%</span></span>;
  <span class="hljs-rule" style="box-sizing: border-box;"><span class="hljs-attribute" style="box-sizing: border-box;">left</span>:<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 102, 102);"><span class="hljs-number" style="box-sizing: border-box;">50</span>%</span></span>;
  <span class="hljs-rule" style="box-sizing: border-box;"><span class="hljs-attribute" style="box-sizing: border-box;">border-radius</span>:<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 102, 102);"> <span class="hljs-number" style="box-sizing: border-box;">5</span>px</span></span>;
  <span class="hljs-rule" style="box-sizing: border-box;"><span class="hljs-attribute" style="box-sizing: border-box;">-webkit-transform</span>:<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 102, 102);"><span class="hljs-function" style="box-sizing: border-box;">translate(-<span class="hljs-number" style="box-sizing: border-box;">50</span>%,-<span class="hljs-number" style="box-sizing: border-box;">50</span>%)</span></span></span>;
  <span class="hljs-rule" style="box-sizing: border-box;"><span class="hljs-attribute" style="box-sizing: border-box;">-moz-transform</span>:<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 102, 102);"><span class="hljs-function" style="box-sizing: border-box;">translate(-<span class="hljs-number" style="box-sizing: border-box;">50</span>%,-<span class="hljs-number" style="box-sizing: border-box;">50</span>%)</span></span></span>;
  <span class="hljs-rule" style="box-sizing: border-box;"><span class="hljs-attribute" style="box-sizing: border-box;">transform</span>:<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 102, 102);"><span class="hljs-function" style="box-sizing: border-box;">translate(-<span class="hljs-number" style="box-sizing: border-box;">50</span>%,-<span class="hljs-number" style="box-sizing: border-box;">50</span>%)</span></span></span>;
<span class="hljs-rule" style="box-sizing: border-box;">}</span></span></code>
效果：


5.矩阵 matrix()

　　matrix() 是一个含六个值的(a,b,c,d,e,f)变换矩阵，用来指定一个2D变换，相当于直接应用一个[a b c d e f]变换矩阵。 
　　就是基于水平方向（X轴）和垂直方向（Y轴）重新定位元素，此属性值使用涉及到数学中的矩阵。

ax+cy+e表示变换后的水平坐标； 
bx+dy+f表示变换后的垂直位置。 
其中：矩阵偏移元素的中心点是(x, y)

【例如】

<code class="hljs rsl has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">transform</span>: <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">matrix</span>(<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1</span>, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1</span>, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">30</span>, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">30</span>); 
<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">/* a=1, b=0, c=0, d=1, e=30, f=30 */</span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li></ul>

　　假设矩阵偏移元素的中心点是(0, 0)，即x=0, y=0。 
　　于是，变换后的x坐标就是ax+cy+e = 1*0+0*0+30 =30；y坐标就是bx+dy+f = 0*0+1*0+30 =30。 
　　于是，中心点坐标从(0, 0)变成了→(30, 30)。即往右下方同时偏移了30像素。 
　　【结论】实际上transform: matrix(1, 0, 0, 1, 30, 30); 就等同于transform: translate(30px, 30px)；

注意： translate,rotate等方法都是需要单位的，而matrix方法e, f参数的单位可以省略。

6.原点 transform-origin

　　任何一个元素都有一个中心点，默认情况之下，其中心点是居于元素X轴和Y轴的50%处。如下图所示： 


在没有重置transform-origin改变元素原点位置的情况下，CSS变形进行的旋转、位移、缩放，扭曲等操作都是以元素自己中心位置进行变形。但很多时候，我们可以通过transform-origin来对元素进行原点位置改变，使元素原点不在元素的中心位置，以达到需要的原点位置。
transform-origin取值和元素设置背景中的background-position取值类似，如下表所示：

例子：

通过transform-origin 改变元素原点到左上角，然后进行顺时旋转45度。

<code class="language-html hljs  has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">div</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">class</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"wrapper"</span>></span>
  <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">div</span>></span>原点在默认位置处<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">div</span>></span>
<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">div</span>></span>
<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">div</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">class</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"wrapper transform-origin"</span>></span>
  <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">div</span>></span>原点重置到左上角<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">div</span>></span>
<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">div</span>></span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li></ul>
<code class="language-css hljs  has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">/*css代码*/</span>
<span class="hljs-class" style="box-sizing: border-box;">.wrapper</span> <span class="hljs-rules" style="box-sizing: border-box;">{
  <span class="hljs-rule" style="box-sizing: border-box;"><span class="hljs-attribute" style="box-sizing: border-box;">width</span>:<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 102, 102);"> <span class="hljs-number" style="box-sizing: border-box;">300</span>px</span></span>;
  <span class="hljs-rule" style="box-sizing: border-box;"><span class="hljs-attribute" style="box-sizing: border-box;">height</span>:<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 102, 102);"> <span class="hljs-number" style="box-sizing: border-box;">300</span>px</span></span>;
  <span class="hljs-rule" style="box-sizing: border-box;"><span class="hljs-attribute" style="box-sizing: border-box;">float</span>:<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 102, 102);"> left</span></span>;
  <span class="hljs-rule" style="box-sizing: border-box;"><span class="hljs-attribute" style="box-sizing: border-box;">margin</span>:<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 102, 102);"> <span class="hljs-number" style="box-sizing: border-box;">100</span>px</span></span>;
  <span class="hljs-rule" style="box-sizing: border-box;"><span class="hljs-attribute" style="box-sizing: border-box;">border</span>:<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 102, 102);"> <span class="hljs-number" style="box-sizing: border-box;">2</span>px dotted red</span></span>;
  <span class="hljs-rule" style="box-sizing: border-box;"><span class="hljs-attribute" style="box-sizing: border-box;">line-height</span>:<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 102, 102);"> <span class="hljs-number" style="box-sizing: border-box;">300</span>px</span></span>;
  <span class="hljs-rule" style="box-sizing: border-box;"><span class="hljs-attribute" style="box-sizing: border-box;">text-align</span>:<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 102, 102);"> center</span></span>;
<span class="hljs-rule" style="box-sizing: border-box;">}</span></span>
<span class="hljs-class" style="box-sizing: border-box;">.wrapper</span> <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;">div</span> <span class="hljs-rules" style="box-sizing: border-box;">{
  <span class="hljs-rule" style="box-sizing: border-box;"><span class="hljs-attribute" style="box-sizing: border-box;">background</span>:<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 102, 102);"> orange</span></span>;
  <span class="hljs-rule" style="box-sizing: border-box;"><span class="hljs-attribute" style="box-sizing: border-box;">-webkit-transform</span>:<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 102, 102);"> <span class="hljs-function" style="box-sizing: border-box;">rotate(<span class="hljs-number" style="box-sizing: border-box;">45</span>deg)</span></span></span>;
  <span class="hljs-rule" style="box-sizing: border-box;"><span class="hljs-attribute" style="box-sizing: border-box;">transform</span>:<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 102, 102);"> <span class="hljs-function" style="box-sizing: border-box;">rotate(<span class="hljs-number" style="box-sizing: border-box;">45</span>deg)</span></span></span>;
<span class="hljs-rule" style="box-sizing: border-box;">}</span></span>
<span class="hljs-class" style="box-sizing: border-box;">.transform-origin</span> <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;">div</span> <span class="hljs-rules" style="box-sizing: border-box;">{
  <span class="hljs-rule" style="box-sizing: border-box;"><span class="hljs-attribute" style="box-sizing: border-box;">-webkit-transform-origin</span>:<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 102, 102);"> left top</span></span>;
  <span class="hljs-rule" style="box-sizing: border-box;"><span class="hljs-attribute" style="box-sizing: border-box;">transform-origin</span>:<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 102, 102);"> left top</span></span>;
<span class="hljs-rule" style="box-sizing: border-box;">}</span></span></code>
效果： 



<code class="language-html hljs  has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;"><!--html代码--></span>
<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">div</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">class</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"wrapper"</span>></span>
  <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">div</span>></span>我变成平形四边形<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">div</span>></span>
<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">div</span>></span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li></ul>
<code class="language-css hljs  has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">/*css代码*/</span>
<span class="hljs-class" style="box-sizing: border-box;">.wrapper</span> <span class="hljs-rules" style="box-sizing: border-box;">{
  <span class="hljs-rule" style="box-sizing: border-box;"><span class="hljs-attribute" style="box-sizing: border-box;">width</span>:<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 102, 102);"> <span class="hljs-number" style="box-sizing: border-box;">300</span>px</span></span>;
  <span class="hljs-rule" style="box-sizing: border-box;"><span class="hljs-attribute" style="box-sizing: border-box;">height</span>:<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 102, 102);"> <span class="hljs-number" style="box-sizing: border-box;">100</span>px</span></span>;
  <span class="hljs-rule" style="box-sizing: border-box;"><span class="hljs-attribute" style="box-sizing: border-box;">border</span>:<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 102, 102);"> <span class="hljs-number" style="box-sizing: border-box;">2</span>px dotted red</span></span>;
  <span class="hljs-rule" style="box-sizing: border-box;"><span class="hljs-attribute" style="box-sizing: border-box;">margin</span>:<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 102, 102);"> <span class="hljs-number" style="box-sizing: border-box;">30</span>px auto</span></span>;
<span class="hljs-rule" style="box-sizing: border-box;">}</span></span>
<span class="hljs-class" style="box-sizing: border-box;">.wrapper</span> <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;">div</span> <span class="hljs-rules" style="box-sizing: border-box;">{
  <span class="hljs-rule" style="box-sizing: border-box;"><span class="hljs-attribute" style="box-sizing: border-box;">width</span>:<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 102, 102);"> <span class="hljs-number" style="box-sizing: border-box;">300</span>px</span></span>;
  <span class="hljs-rule" style="box-sizing: border-box;"><span class="hljs-attribute" style="box-sizing: border-box;">height</span>:<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 102, 102);"> <span class="hljs-number" style="box-sizing: border-box;">100</span>px</span></span>;
  <span class="hljs-rule" style="box-sizing: border-box;"><span class="hljs-attribute" style="box-sizing: border-box;">line-height</span>:<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 102, 102);"> <span class="hljs-number" style="box-sizing: border-box;">100</span>px</span></span>;
  <span class="hljs-rule" style="box-sizing: border-box;"><span class="hljs-attribute" style="box-sizing: border-box;">text-align</span>:<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 102, 102);"> center</span></span>;
  <span class="hljs-rule" style="box-sizing: border-box;"><span class="hljs-attribute" style="box-sizing: border-box;">color</span>:<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 102, 102);"> <span class="hljs-hexcolor" style="box-sizing: border-box;">#fff</span></span></span>;
  <span class="hljs-rule" style="box-sizing: border-box;"><span class="hljs-attribute" style="box-sizing: border-box;">background</span>:<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 102, 102);"> orange</span></span>;
  <span class="hljs-rule" style="box-sizing: border-box;"><span class="hljs-attribute" style="box-sizing: border-box;">-webkit-transform</span>:<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 102, 102);"> <span class="hljs-function" style="box-sizing: border-box;">skew(<span class="hljs-number" style="box-sizing: border-box;">45</span>deg)</span></span></span>;
  <span class="hljs-rule" style="box-sizing: border-box;"><span class="hljs-attribute" style="box-sizing: border-box;">-moz-transform</span>:<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 102, 102);"><span class="hljs-function" style="box-sizing: border-box;">skew(<span class="hljs-number" style="box-sizing: border-box;">45</span>deg)</span> 
  transform:<span class="hljs-function" style="box-sizing: border-box;">skew(<span class="hljs-number" style="box-sizing: border-box;">45</span>deg)</span></span></span>;
<span class="hljs-rule" style="box-sizing: border-box;">}</span></span></code>
/*css代码*/ div :hover { -webkit-transform: scale(1.5,0.5); -moz-transform:scale(1.5,0.5) transform: scale(1.5,0.5);}
祥灬子
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【CSS】transform相关知识点
Komorebi_00的博客
11-08 1332
transform的使用
深入理解CSS3动画 rotate
weixin_45696837的博客
10-17 949
我这个解释可能会比较全，如果有兴趣深入了解CSS3动画的朋友，往下看，也许会有意想不到的收获。 本来想找张浏览器空间坐标轴的图的。结果没有找到。 那就听我说，你们想象一下。 x轴水平朝右，y轴垂直于x轴垂直向下，z轴垂直于x轴，y轴所成的平面，从屏幕指向我们。 现在脑子里构思一下这么个坐标系。然后继续发挥想象。 ok,我可没偷懒，只不过我的笔记记得会比较好看。 所以我直接征用了。 rotate 这个函数请区分于rotateX,rotateY,rotateZ理解，下面三个都是基于3D的变化，而这个是基于2
Transform详解
qq_54146731的博客
11-07 977
优点（1）虽然Transformer最终也没有逃脱传统学习的套路，Transformer也只是一个全连接（或者是一维卷积）加Attention的结合体。但是其设计已经足够有创新，因为其抛弃了在NLP中最根本的RNN或者CNN并且取得了非常不错的效果，算法的设计非常精彩，值得每个深度学习的相关人员仔细研究和品位。（2）Transformer的设计最大的带来性能提升的关键是将任意两个单词的距离是1，这对解决NLP中棘手的长期依赖问题是非常有效的。
前端css中的transform(转换)的使用
最新发布
小蜗牛764号的博客
04-22 1280
css中transform的属性虽然有多个，其实弄懂了平移（translate）、旋转（rotate）、缩放（scale）、倾斜（skew），后面的那些关于3d效果以及综合变换（如：平移+旋转+缩放等，自由组配）的属性就是这些前面4种效果的延伸和拓展。在3d的效果下/* 保留 3D 效果 */通常要添加，不然程序有些时候达不到预期的3d视图效果，只显示2d状态效果。通常设置于元素的父集中。此外，倾斜通常用于2d状态的变换，对于类似倾斜的3d的效果通常由rotate实现。
transform总结
weixin_30245867的博客
09-14 239
1. 用jquery的css方法获取transform得到的是矩阵matrix,不利于获取translate的值， 优先使用dom.style.webKitTransform进行transform的读写 2. 从transform中读取translate的值方法 //jquery版本 function fGetTranslate($obj,type){ var t...
transform总结————PyTorch
weixin_45947476的博客
10-12 131
from PIL import Image from torch.utils.tensorboard import SummaryWriter#从tensorboard引入SummaryWriter from torchvision import transforms # 之前说过tensorboard必须为tensor的数据类型 # tensor实际上就是一个多维数组，能够创造更高维度的矩阵、向量， # 具体参考知乎 https://zhuanlan.zhihu.com/p/48982978 #
css3 transform属性详解
09-25
transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。
CSS3 transform图标加载特效代码
03-20
其中，`transform`属性是CSS3中的一个关键特性，允许我们对网页元素进行二维或三维的变换操作，如旋转、缩放、平移和倾斜。在本次提到的"CSS3 transform图标加载特效代码"中，我们主要探讨如何利用这一特性来创建...
纯css3 transform文字变形3D阴影效果代码
11-05
在CSS3中，我们可以将`transform`应用于任何内联或块级元素，包括文字。它通过设置如`rotate()`, `scale()`, `translate()`和`skew()`等函数来实现变换。例如，要将一个元素向右平移50像素，可以这样写： ```css ....
css3 transform实现散乱的照片排列特效代码
03-20
在网页设计领域，CSS3（层叠样式表第三版）为开发者提供了许多强大的工具，其中transform属性是不可或缺的一部分。这个属性允许我们对元素进行二维或三维的变换操作，如旋转、缩放、移动和倾斜，极大地提升了网页...
纯css3 transform制作带指针偏移Safari指南针动
09-14
本文将深入探讨如何使用纯CSS3的`transform`属性来创建一个带有指针偏移的Safari指南针动画。我们将讨论`transform`属性的核心概念，以及在实现动态指南针时需要注意的细节。 首先，`transform`属性允许我们对元素...
Transforms简单应用
m0_73599738的博客
04-23 693
transforms常常用来对图片进行预处理。
Transformer 的优点和关键优势
热门推荐
给我一点温度
07-17 2万+
本文不是一篇全文解读，仅谈一谈该模型的关键优势，了解我们在构建深度学习模型时使用 Transformer 模型的适用条件是什么。 什么是 Transformer？ Transformer 是 Google 的研究者于 2017 年在《Attention Is All You Need》一文中提出的一种用于 seq2seq 任务的模型，它没有 RNN 的循环结构或 CNN 的卷积结构，在机器翻译等任务中取得了一定提升。 动机 RNN、LSTM 和 GRU 网络已在序列模型、语言建模、机器翻译等应用
rotate函数css,CSS3函数rotate()怎么使用
weixin_29762229的博客
08-03 4529
我们都知道，在css3里rotate()函数是能够旋转元素的，他主要是在二维空间内进行旋转操作，那么今天我们就给大家带来实例，看一下这个rotate()函数怎么使用。如果对元素本身或者元素设置了perspective值，那么rotate3d()函数可以实现一个3维空间内的旋转。关联属性：transform-origin。取值rotate();为一个角度值，单位deg，可以为正数或者负数，正数是顺时...
NLP中的Transform理解
m0_52647764的博客
09-15 1984
Transform相关理论 transform模型Transformer模型在2017年被google提出，直接基于Self-Attention结构，取代了之前NLP任务中常用的RNN神经网络结构，并在WMT2014 Englishto-German和WMT2014 English-to-French两个机器翻译任务上都取得了当时的SOTA。 与RNN这类神经网络结构相比，Transformer一个巨大的优点是：模型在处理序列输入时，可以对整个序列输入进行并行计算，不需要按照时间步循环递归处理输入序列。
transform 学习
qq_28453705的博客
11-20 138
- (void)viewDidLoad {               [super viewDidLoad];               UILabel *backLabel = [[UILabel alloc] initWithFrame:CGRectMake(10, 10, 100, 100)];     backLabel.backgroundColor = [UIColo...
css3—transform
记录点滴
09-15 594
tranform英文意思是：改变，使··· 变形； transform有四个属性分别来看下： 1、旋转 transform：rotate（xxxdeg）；使元素旋转多少度，正数为顺时针旋转多少度；负数为逆时针旋转多少度。 实际案例： 鼠标hover，小三角旋转360° <style> .box{ position: relative; width:1...
CSS3 transform变换
weixin_30699443的博客
06-15 106
CSS3 transform变换 1、translate(x,y) 设置盒子位移2、scale(x,y) 设置盒子缩放3、rotate(deg) 设置盒子旋转4、skew(x-angle,y-angle) 设置盒子斜切5、perspective 设置透视距离6、transform-style flat | preserve-3d 设置盒子是否按3d空间显示7、translateX、tr...
也谈谈Unity的transform使用
weixin_30553837的博客
10-19 921
谈谈Unity的transform使用 本文章由cartzhang编写，转载请注明出处。 所有权利保留。 文章链接：http://blog.csdn.net/cartzhang/article/details/52862118 作者：cartzhang 一、Transform和transform 我们来详谈Unity的transform使用，这里所说的tansf...
css之transform
07-27
CSS的`transform`属性用于对元素进行变换操作，包括平移、缩放、旋转和倾斜等。它是一个非常强大和常用的属性，可以通过一些简单的变换实现复杂的效果。 下面是一些常见的`transform`属性值和示例用法： 1. 平移（`translate`）：通过指定元素在水平和垂直方向的偏移量，实现元素的平移效果。 ```css transform: translate(100px, 50px); ``` 2. 缩放（`scale`）：通过指定元素在水平和垂直方向的缩放比例，实现元素的缩放效果。 ```css transform: scale(1.5, 0.8); ``` 3. 旋转（`rotate`）：通过指定元素的旋转角度，实现元素的旋转效果。 ```css transform: rotate(45deg); ``` 4. 倾斜（`skew`）：通过指定元素在水平和垂直方向的倾斜角度，实现元素的倾斜效果。 ```css transform: skew(10deg, -5deg); ``` 除了单独使用上述属性，还可以组合使用多个变换属性，实现更复杂的效果。例如： ```css transform: translate(100px, 50px) rotate(45deg) scale(1.5); ``` 需要注意的是，`transform`属性是一个累加的属性，即多个变换操作会按照声明的顺序依次应用。同时，`transform-origin`属性可以用于指定变换的原点，默认为元素的中心点。 希望这些信息对你有帮助！如有更多问题，请继续提问。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值