transform-origin属性的作用
早早就跟你说过，CSS3里有种叫transform-origin的技巧，能把网页来来回回地摆弄呀。只需动动X/Y轴和Z轴的位置，就会发现有N多种转动效果。可别小瞧这玩意儿，用对了的话，整个Web页面立马酷炫又真实起来！
2D旋转与transform-origin
嘿~知道吗？2D旋转就像把东西放到平整的地上然后翻翻身，这样看起来更舒服~想转它的话去”transform”属性那看看，只要加个rotate函数就成了~比如说transform: rotate(180deg)这条代码可以让它整个顺时针方向转180度。别忘了，正数代表顺时针转，负数就相反咯。
说起二维转动，以前我们就是直接硬搬东西到中间。但别急，现在我们能用transform-origin这个属性去改变旋转起点！如此一来，调图片大大小小角度都行，操作简单又好玩儿，创新设计一下子轻松多了哈～
transform:rotate(度数);
使用transform-origin改变旋转中心点
实话告诉你，这个transform-origin属性，简直就是个神奇的魔法棒，处理2D设计那叫容易。二维平面上的东西，随心所欲地往前后左右任何方向移动，X、Y轴完全没问题。但你问我遇到3D元素怎么办？别急，这根魔法棒不但能随意调整长度、角的大小，甚至还能变换位置，真的超级实用！
css 你们晓得伐？transform-origin这玩意儿可不是随便就能用的。要用在x轴、y轴还是z轴，得看具体情况！
记住，把 X 和 Y 用空格分隔开，别犯傻弄丢了它们，否则就玩儿不转！开始设定时都是 50%，像旋钮一样自己调。用像素或 top、bottom、left、right、center 这样的词汇去找中心，太简单了！
瞧好了！学会这几招就可以轻轻松松用transform-origin，让你的东西从选定的地点转起来~
.element {
transform: rotate(45deg);
transform-origin: x-axis y-axis z-axis;
transform-origin: 0 0;
}
这行代码就是要把那个叫’.element’的东西挪到显示器左上角，就跟拼拼图一样，头尾都要稳住。等网站加载好了，你瞅瞅它就像是个优雅的芭蕾舞者，跳得可漂亮了！
总结与展望
看了这篇文章，大家是不是都知道如何调中心转元素了呀？学会这样做能让网页变得更加炫酷，实用性提高，用户们看到也会更满意的。身为前端开发人员，赶紧试试，原本单调乏味的设计瞬间焕发新活力，创意十足！
小伙伴们好！聊聊你们用过CSS3 transform-origin有啥感觉？觉得好用不？你是咋把它用到泛滥成灾的地步的？实践项目里有啥效果？
123 #div1 { position: relative; height: 200px; width: 200px; margin: 100px; padding:10px; border: 1px solid black; } #div2 { padding:50px; position: absolute; border: 1px solid black; background-color: red; transform: rotate(45deg); transform-origin:20% 40%; -ms-transform: rotate(45deg); /* IE 9 */ -ms-transform-origin:20% 40%; /* IE 9 */ -webkit-transform: rotate(45deg); /* Safari and Chrome */ -webkit-transform-origin:20% 40%; /* Safari and Chrome */ }HELLO
。
评论0