css3实现div旋转 CSS transform中的rotate的旋转中心怎么设置?
浏览量:1437
时间:2021-03-11 01:37:16
作者:admin
CSS transform中的rotate的旋转中心怎么设置?
使用transform origin设置CSS3的旋转中心,有两个参数表示X轴和Y轴的位置。
旋转基准点:元素左上角或长方体模型左上角的位置。
参考点坐标线:右x轴与几何x轴相同,向下Y轴与几何Y轴相反。图示如下:
CSS transform中有两种旋转中心设置:
1。使用关键字设置位置变换原点:center bottom
第一个参数可以是center,left,right。第二个参数是中心、顶部和底部。分别表示长方体模型几何体、垂直中间、垂直头部和垂直底部
2-原点:3px 40px这两个参数是以像素为单位的坐标值的X和Y值。
css3的图形3d翻转效果应用示例?
1. 首先,打开HTML文件编辑器,并使用vscode创建一个新的HTML文档。基本的HTML结构写在文档中。然后插入img标签和图像,并给img一个class属性:
2。在上面的head标签中的style标签中设置样式,在这里设置图像的宽度和高度,并设置相对定位,然后设置鼠标的图像悬挂样式,其中动画形式为3D,图片的3D旋转角度偏移设置。添加动画并设置延迟:
3。最后,打开浏览器,您将看到一张图片:
css能让图片旋转角度吗?
需要CSS3属性:变换:旋转(-15度)/*-15度角*/希望对您有所帮助^-^
版权声明:本文内容由互联网用户自发贡献,本站不承担相关法律责任.如有侵权/违法内容,本站将立刻删除。
上一篇
html容器 html网页制作