旋转效果

旋转样式名:transform: rotate

旋转取值:顺时针为正值,逆时针为负值(顺正逆负)
角度单位:deg

示例:
顺时针旋转 360度∨
transform: rotate(360deg);
逆顺时针旋转 360度∨
transform: rotate(-360deg);

旋转原点:默认为盒子中心点

用法:transform-origin: 原点水平位置 原点垂直位置;
1.方位名词取值(常用)
left, top, right, bottom, center

示例:
右下∨
transform-origin: right bottom;
中上∨
transform-origin: center top;

2.具体的像素单位,从盒子左上角起(正负均可)

示例:
x轴水平向右(正方向)100像素,y轴垂直向下(正方向)100像素∨
transform-origin: 100px 100px;

3.百分比,从盒子左上角起 (参照于盒子自身尺寸,正负均可)

示例:
x轴水平向右(正方向)移动盒子宽度的30%,y轴垂直向下(正方向)移动盒子高度的30%∨
transform-origin: 30% 30%;

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • css3动画 过渡:transition 2D 转换 transform 3D 转换 transform 动画:a...
    刘松阳阅读 774评论 0 0
  • 解决audio标签样式问题及ios自动播放问题 html代码如下,ios的audio标签好像不支持ogg文件播放,...
    手表大大阅读 1,904评论 0 0
  • ##css3动画 过渡:transition 2D转换transform 3D转换transform 动画:ani...
    猴子不是妖精阅读 209评论 0 0
  • 1,css3针对CSS2版本出现的弱点进行的一个补充性提升。主要提升了新的CSS样式的设置, 弹性盒子和媒体查询以...
    悟名先生阅读 882评论 0 3
  • CSS3 3D 转换 三维变换使用基于二维变换的相同属性,如果您熟悉二维变换,你们发现3D变形的功能和2D变换的功...
    videring阅读 566评论 0 0