• 网站首页
• 网站建设
• 短视频
• 网站推广
• 网站模板
• 客户案例
• 资讯动态
• 关于我们

css3怎样设置元素旋转角度，怎样设置旋转中心点_CSS学习

当前位置：网站建设 > 技术支持

css3可以设置元素旋转角度，从而得到不一样的形状以及视觉感受。今天小编我就来给各位宝宝分析一下在css3中怎样设置元素的旋转角度，以及怎样设置旋转元素的中心点。

工具/原料

• 电脑
• vscode

方法/步骤

1. 1

   如图，小编我就用两个一样的div进行对比，这是基础的div代码。

2. 2

   如图，这是没有旋转的div，接着我们只给灰蓝色的div设置旋转，好明确知道旋转中心点是什么。

3. 3

   给灰蓝色div设置就是使用.t类名，然后用到了transform，接着就是rotate了。注意角度用的是deg，这里我就设置旋转45度。

4. 4

   接着看下对比，灰蓝色的div已经旋转了，并且旋转的中心点默认是div的正中心哦。

5. 5

   而如果我们要设置旋转的中心点可以用到transform-origin这个属性，如图所示，我设置旋转中心为left top，意思是以左上角为旋转中心。

6. 6

   如图，这时候旋转中心改变了，变成了左上了，是不是非常神奇呢？

7. 7

   而右上就是right top，当然还有center（中），bottom（下），大家可以自己组合试试效果。

8. 8

   这里我就只演示了这两种效果，重要是动手看看旋转后的角度方向。

9. 9

   当然了，css3旋转的角度可以设置成负数的。

10. 10

    这样元素就会向反方向旋转哦，这就是css3旋转中需要知道注意的技巧了。

版权说明：
本网站凡注明“广州京杭 原创”的皆为本站原创文章，如需转载请注明出处！
本网转载皆注明出处，遵循行业规范，如发现作品内容版权或其它问题的，请与我们联系处理！
欢迎扫描右侧微信二维码与我们联系。