变形--旋转 rotate()

变形--旋转 rotate()

旋转rotate()函数通过指定的角度参数使元素相对原点进行旋转。它主要在二维空间内进行操作,设置一个角度值,用来指定旋转的幅度。如果这个值为正值,元素相对原点中心顺时针旋转;如果这个值为负值,元素相对原点中心逆时针旋转。如下图所示:

HTML代码:

<div class="wrapper">
  <div></div>
</div>

CSS代码:

.wrapper {
  width: 200px;
  height: 200px;
  border: 1px dotted red;
  margin: 100px auto;
}
.wrapper div {
  width: 200px;
  height: 200px;
  background: orange;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

演示结果

时间: 2024-12-07 04:22:41

变形--旋转 rotate()的相关文章

CSS3属性transform详解之(旋转:rotate,缩放:scale,倾斜:skew,移动:translate)(转载)

在CSS3中,可以利用transform功能来实现文字或图像的旋转.缩放.倾斜.移动这四种类型的变形处理,本文将对此做详细介绍. 一.旋转 rotate 用法:transform: rotate(45deg); 共一个参数“角度”,单位deg为度的意思,正数为顺时针旋转,负数为逆时针旋转,上述代码作用是顺时针旋转45度. 二.缩放 scale 用法:transform: scale(0.5)  或者  transform: scale(0.5, 2); 参数表示缩放倍数: 一个参数时:表示水平和

CSS3属性transform详解之(旋转:rotate,缩放:scale,倾斜:skew,移动:translate)

CSS3属性transform详解之(旋转:rotate,缩放:scale,倾斜:skew,移动:translate) 在CSS3中,可以利用transform功能来实现文字或图像的旋转.缩放.倾斜.移动这四种类型的变形处理,本文将对此做详细介绍. 一.旋转 rotate 用法:transform: rotate(45deg); 共一个参数"角度",单位deg为度的意思,正数为顺时针旋转,负数为逆时针旋转,上述代码作用是顺时针旋转45度. 二.缩放 scale 用法:transform

css3倒影变形旋转缩放

一.倒影 :-webkit-box-reflect: 属性值1:位置 [above , below , left , right] 属性值2:间距 像素值 属性值3:渐变-webkit-box-reflect: -webkit-linear-gradient(top,rgba(0,0,0,0) 20%,rgba(0,0,0,0.6)) 二.变形transform 旋转:rotate(90deg) 变形原点:transform-origin : [percentage | length | lef

Canvas绘图之平移translate、旋转rotate、缩放scale

画布操作介绍 画布绘图的环境通过translate(),scale(),rotate(), setTransform()和transform()来改变,它们会对画布的变换矩阵产生影响. 函数 方法 描述 translate dx,dx 转换的量的 X 和 Y 大小 scale sx,sy 水平和垂直的缩放因子 rotate angle 旋转的量,用弧度表示.正值表示顺时针方向旋转,负值表示逆时针方向旋转. setTransform a,b,c,d,e,f 水平缩放,水平倾斜(与旋转有关),垂直倾

css3动画属性系列之transform细讲旋转rotate

1.语法: transform: none |  <transform-function> [<transform-function>]* 2.取值: none                                  ----不进行变化 <transform-function>         ----一个或多个变换函数,以空格分开 可以用于内联元素和块级元素,可以实现旋转.缩放.移动等等效果.具体如下: rotate ---旋转 Java代码   /* ro

HDU 4998 (点的旋转) Rotate

为了寻找等效旋转操作,我们任选两个点P0和Q0,分别绕这n个点旋转一定的角度后最终得到Pn和Qn 然后已知:P0和Pn共圆,Q0和Qn共圆.所以要找的等效旋转点就是这两个线段的垂直平分线交点O. 等效的角度的计算,可以利用已知的等腰三角形(这里有两个)△P0PnR,做一条垂线(三线合一的性质),再利用反三角函数计算半角,再乘二 还有一种特殊情况就是,如果答案比平角要大,我们计算的角度就不对了. 此时可以让P0逆时针旋转90°得到一个P1,然后将P1和Pn的坐标分别代入直线P0R的方程,如果异号,

css样式-旋转rotate

一般前端经常用到例如'<'这样的箭头,然后自己通过旋转变换方向,可以让箭头向上.向下,然后有一天我是用的span,背景是ui提供的箭头图片,死活旋转不了,我就蒙圈了... 解决: 把span元素直接换成块状元素,或者给span设置inline-block或者block.让span成为块状元素就可以了. 下图是中国w3.org网上面的解释,一开始不懂atomic inline-level element是个啥,点链接看到的是inline level box的介绍,就总以为原子级内联元素就是inli

CSS3中的变形处理

在css3中,可以利用transform功能实现文字或图像的旋转.缩放.倾斜.移动这4种类型的变形处理. 变形--旋转 rotate() div.box{transform: rotate(45deg);} /*顺时针旋转45度*/ 变形--扭曲 skew() div.box{transform:skew(45deg);} /*通过skew()函数将长方形变成平行四边形. Skew()具有三种情况: 1.skew(x,y)使元素在水平和垂直方向同时扭曲(X轴和Y轴同时按一定的角度值进行扭曲变形)

CSS3中的变形与动画

CSS3变形--旋转 rotate() 旋转rotate()函数通过指定的角度参数使元素相对原点进行旋转.它主要在二维空间内进行操作,设置一个角度值,用来指定旋转的幅度.如果这个值为正值,元素相对原点中心顺时针旋转:如果这个值为负值,元素相对原点中心逆时针旋转.如下图所示: HTML代码: <div class="wrapper"> <div></div> </div> CSS代码: .wrapper { width: 200px; he