详解54 transform: rotate()；

最新推荐文章于 2021-08-04 03:27:43 发布
最新推荐文章于 2021-08-04 03:27:43 发布
阅读量730 收藏
点赞数 1
分类专栏： CSS3最详解
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37805832/article/details/108113650
版权 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    div
     /*核心:这些都是以div正中心开始旋转的.仔细看看文字,记住每一个文字开始都是在左上角为0deg。
    你可以理解四个角是0deg  90deg   180deg   270deg,注意一下原点旋转一周30deg，也是开始的原点.
    */
    {
      width: 200px;
      height: 200px;
      border: 3px solid red;
      background: yellow;
      margin: 100px auto;
    }
    .box1
    {
      transform: rotate(30deg);
    }
    .box2
    {
      transform: rotate(90deg);
    }
    .box3
    {
      transform: rotate(120deg);
    }
    .box4{
      -webkit-transform:rotate(180deg);
              transform:rotate(180deg);
    }
    .box5{
      -webkit-transform:rotate(270deg);
              transform:rotate(270deg);
    }
    .box6{
      -webkit-transform:rotate(360deg);
              transform:rotate(360deg);
    }
    .box7
    {
      transform: rotate(-45deg);/*逆时针旋转45deg*/
    }
  </style>
</head>
<body>
  <div class="box1">box1</div>
<div class="box2">box2</div>
<div class="box3">box3</div>
<div class="box4">box4</div>
<div class="box5">box5</div>
<div class="box6">box6</div>
<div class="box7">box7</div>
<div class="box8">box8</div>
<div class="box9">box9</div>
<div class="box10">box10</div>

</body>
</html>
贵哥的编程之路(热爱分享)
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
坐标转换C++自己做的
12-15
public class CoordTrans7Param { public double[,] values=new double[7,1]; //{{dx},{dy},{dz},{rx},{ry},{rz},{k}}; //public double　　 两个坐标系转换一般需要平移，旋转，缩放共七参数。 Y=（1＋k)*M(x,y,z)*X+dX; public double[,] values=new double[7,1]; //{{dx},{dy},{dz},{rx},{ry},{rz},{k}}; //public double dx,dy,dz,rx,ry,rz,k; public void Set4Param(double dx,double dy,double dz,double k) { this.dx=dx; this.dy=dy; this.dz=dz; this.k=k; this.rx=this.ry=this.rz=0; } public void SetRotationParamRad(double rx,double ry,double rz) { this.rx=rx; this.ry=ry; this.rz=rz; } public void SetRotationParamMM(double rx,double ry,double rz) { SetRotationParamRad(rx*Math.PI/648000,ry*Math.PI/648000,rz*Math.PI/648000); } private double[,] GetMx() { double [,] Mx=new double[,] {{1,0,0}, {0,Math.Cos(rx),Math.Sin(rx)}, {0,-Math.Sin(rx),Math.Cos(rx)}}; return Mx; } private double[,] GetMy() { double [,] My=new double[,] {{Math.Cos(ry),0,-Math.Sin(ry)}, {0,1,0}, {Math.Sin(ry),0,Math.Cos(ry)}}; return My; } private double[,] GetMz() { double [,] Mz=new double[,] {{Math.Cos(rz),Math.Sin(rz),0}, {-Math.Sin(rz),Math.Cos(rz),0}, {0,0,1}}; return Mz; } private double[,] GetM() //M=Mx*My*Mz? or M=Mz*My*Mx? { double [,] M=new double[3,3]; MatrixTool.Multi(GetMz(),GetMy(),ref M); MatrixTool.Multi(M,GetMx(),ref M); return M; } private double[,] GetMdx() { double[,] mt = {{ 0, 0, 0 }, { 0, -Math.Sin(rx), Math.Cos(rx) }, { 0, -Math.Cos(rx), -Math.Sin(rx) }}; double[,] m=new double[3,3]; MatrixTool.Multi(GetMz(),GetMy(),ref m); MatrixTool.Multi(m,mt,ref m); return m; } private double[,] GetMdy() { double[,] mt = {{ -Math.Sin(ry), 0, -Math.Cos(ry) }, { 0, 0, 0 }, { Math.Cos(ry), 0, -Math.Sin(ry) }}; double[,] m=new double[3,3]; MatrixTool.Multi(GetMz(),mt,ref m); MatrixTool.Multi(m,GetMx(),ref m); return m; } private double[,] GetMdz() { double[,] mt = {{ -Math.Sin(rz), Math.Co
C++：transform用法
weixin_34417200的博客
03-17 401
摘自：http://blog.csdn.net/luyuncheng/article/details/8659179View Code     /*//////////////////////////////// template &lt; class InputIterator, class OutputIterator, class UnaryOperator ...
再学 GDI+[71]: 路径画刷(11) - RotateTransform、ScaleTransform 等变换
weixin_34192993的博客
06-29 2360
RotateTransform {旋转} ScaleTransform {缩放} TranslateTransform {平移} SetTransform {综合的矩阵变换} ResetTransform {取消变换} 本例效果图: 代码文件: unit Unit1; interface uses Windo...
css3属性transform之rotate
SupAack的博客
02-20 786
rotateX()：以X轴为中心线旋转 rotateY()：以Y轴为中心线旋转 rotateZ()：以Z轴为中心线旋转 三个属性可以多个，但不能写重 只写 rotate(0deg) 相当于 rotateX(0deg) transform: rotateX(20deg) rotateY(50deg) rotateZ(10deg); 旋转不会影响正常文档流 ...
CSS伪类实现加号
CaseyWei
11-15 925
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X...
详解css3使用transform出现字体模糊的解决办法
01-18
transform: translate(-50%, -50%); display: flex; flex-direction: column; width: 405px; background-color: #ffffff; height: 226px; -webkit-box-shadow: 0 0 2em #5191f1; -moz-box-sh
CSS3中Animation动画属性用法详解
09-24
在CSS3中，Animation属性是实现动态效果的关键，它允许我们创建复杂的动画序列，而无需依赖JavaScript或者其他外部库。本文将深入讲解CSS3中的Animation属性及其用法。 首先，我们来了解一下`@keyframes`规则，这是...
css3 transform属性详解
12-13
CSS3变形是一些效果的集合，比如平移translate() 、旋转rotate()、缩放scare()和倾斜skew()效果，每个效果都被称作为变形函数（Transform Function）,它们可以操控元素发生旋转、缩放、和平移等变化。 CSS3的2D ...
CSS3中transform属性的详解.docx
11-26
在早期的浏览器中，可能需要加上前缀，如`-webkit-transform: rotate(-90deg);`和`-moz-transform: rotate(-90deg);`。另外，IE8及更早版本可以使用滤镜实现类似效果，如`filter: progid:DXImageTransform.Microsoft...
CSS transform-origin属性的理解
09-22
**CSS transform-origin属性详解** **一、属性定义与作用** `transform-origin` 是CSS3中的一个变换属性，它用于指定元素在进行旋转、缩放、移动或倾斜等变换操作时的基点，即变换的原点。这个原点默认位于元素的...
css让div旋转,CSS3 transform 属性 旋转 div 元素
weixin_28900463的博客
08-04 2503
div{transform:rotate(7deg);-ms-transform:rotate(7deg); /* IE 9 */-moz-transform:rotate(7deg); /* Firefox */-webkit-transform:rotate(7deg); /* Safari 和 Chrome */-o-transform:rotate(7deg); /...
css3transform rotate,css3 transform：rotate旋转问题
weixin_42511151的博客
08-03 855
圆环里面的黑色箭头，默认rotate(0deg),橙色的是rotate(72deg),依次增加72deg。到了红色是rotate(288deg)。transform动画，从黑橙黄蓝红顺时针旋转。红的到黑的，而从288逆时针旋转回到0。不知道怎么让他继续顺时针旋转到黑色部分。.anm2-circle-s.bg-b{background-color:#000;-webkit-transform: ro...
css3系列之transform 详解rotate
极客神殿
08-16 1319
　　rotate 　　rotateX 　　rotateY 　　rotateZ 　　rotate3d rotate： 旋转该元素，配合着transform-origin属性，transform-origin 是设置旋转点的。(没有设置transform-origin 属性也可以，只不过是根据该元素的中心点旋转，也就是center center) 加上 transform-origin 设置旋转点。transform-origin 是根据自己而定位的，所以 0px 0px 就是左上角那个点。 ro
html中旋转特效,css3旋转特效
weixin_39959298的博客
06-04 178
@-webkit-keyframes rotation{from {-webkit-transform: rotate(0deg);}to {-webkit-transform: rotate(360deg);}}.rotation{-webkit-transform: rotate(360deg);animation: rotation 1.7s linear infinite;}@-webki...
java transform的作用_为什么旋转（0deg）很重要？
weixin_32951341的博客
03-07 864
试图使用CSS3动画在50px的半径范围内连续制作圆轨道：div {width: 10px;height: 10px;background-color: black;position: absolute;-webkit-animation-name: example;-webkit-animation-duration: 3s;animation:example 1s infinite linea...
css3——transform：rotate（旋转）、scale（缩放）、skew（拉伸）、translate（平移）、transform-origin
热门推荐
zyz00000000的博客
09-28 1万+
注意：transform是复合属性，拆开写会替代，先平移再旋转和先旋转再平移的结果是不同的 1. CSS3 转换：transform属性可以对元素进行移动、缩放、转动、拉长或拉伸 注意：Internet Explorer 9 要求前缀 -ms- 版本，Internet Explorer 10, Firefox, 和 Opera支持transform 属性，Chrome 和 Safari 要求...
CSS3 属性 transform 详解之（旋转:rotate,缩放:scale,倾斜:skew,移动:translate)
weixin_50339217的博客
01-28 2992
在CSS3中，可以利用 transform ( 变形 ) 功能来实现文字或图像的旋转、缩放、倾斜、移动这四种类型的变形处理，本文将对此做详细介绍。 一. 旋转 rotate 用法：transform: rotate(45deg); 共一个参数“角度”，单位deg为度的意思，正数为顺时针旋转，负数为逆时针旋转，上述代码作用是顺时针旋转45度。 二. 缩放 scale 用法：transform: scale(0.5)  或者  transform: scale(0.5, 2) 参数表示
【CSS】transform相关知识点
Komorebi_00的博客
11-08 1366
transform的使用
html转动的圆圈,CSS圆形旋转效果 纯CSS制作圆形旋转菜单效果(七步完成)
weixin_31796803的博客
05-30 2793
我们理念中的菜单都是矩形的，不是横向排列就是纵向排列，这里我们打破了常规的思维，把菜单做成圆形的。在这里我们不得不克服几个问题：如何定义html如何悬停定位菜单元素在此之前先看一下最终效果是怎样的，DEMO放在前面主要是增加大家阅读的兴趣。下面就让我们开始今天的教程吧第一步：构建HTML在编写HTML之前，必须先了解将要构建的结构是怎么样的，下图表示要构建的结构：每个顶部的矩形框都与下面大圆中的一...
transform:rotate
最新发布
09-01
- *1* *2* [CSS3属性 transform详解之（旋转:rotate,缩放:scale,倾斜:skew,移动:translate）（附代码）](https://blog.csdn.net/qq_37968920/article/details/82391671)[target="_blank" data-report-click={"spm":...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

贵哥的编程之路(热爱分享)

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值