你的位置:首页 > 网页设计

[网页设计]【CSS3】变换transform

transform变换

  • rotate旋转

rotate(angle) 2D旋转;rotateX(angle) 沿着x轴旋转;rotateY(angle) 沿着y轴旋转;rotate(angle) 沿着z轴旋转; 

deg角度、rad弧度、turn圈、grad梯度

90deg = 100grad = 0.25turn ≈  1.570796326794897rad

  • scale缩放

0<取值<1 缩小;取值>1 放大。

  • translate 位移

translate(0px,0px);translateX() ;translateY() ;translateZ(); translate3d();

单位为px; 第一个值为x轴方向上移动,第二个值为y轴方向上移动;

  • skew 倾斜

单位为deg,第一个值为水平方向上倾斜,第二个值为垂直方向上倾斜;

  • transform-origin

默认变换的基点为中心点,可设置坐标值或关键词改变基点;

transform-origin: left top;

  • transform-style

使被转换的子元素保留其 3D 转换: preserve-3d;

子元素将不保留其3D转换:flat;

行星运动效果 

 

<!doctype html><html><head> <meta charset="utf-8"> <title>H5动画-行星运动3D效果</title> <style>  body,  ul {   margin: 0;   padding: 0;  }  ul {   list-style: none;  }  .lin[data-v-3dcdcd53]{   width: 400px;   height: 400px;   padding-top: 80px;   margin: 100px auto;   position: relative;   -webkit-transform-style: preserve-3d;   transform-style: preserve-3d;   -webkit-transform: translateX(0) translateY(0) translateZ(0) rotateX(75deg) rotateY(0deg) rotate(5deg);   transform: translateX(0) translateY(0) translateZ(0) rotateX(75deg) rotateY(0deg) rotate(5deg);   transition: all 1s;  }    .limg{   width: 300px;   height: 300px;   text-align: center;   -webkit-transform-style: preserve-3d;   transform-style: preserve-3d;   -webkit-transform: translateX(15px) translateY(-50px) translateZ(-40px) rotateX(-75deg) rotateY(0deg) rotate(-1deg);   transform: translateX(15px) translateY(-50px) translateZ(-40px) rotateX(-75deg) rotateY(0deg) rotate(-1deg);   }  ul[data-v-3dcdcd53] {   width: 450px;   height: 450px;   transform-style: preserve-3d;   transform: translateX(-50px) translateY(-500px) translateZ(0) rotateX(0deg) rotateY(30deg) rotate(0deg);   animation: allCircle 25s linear infinite alternate;  }  @-webkit-keyframes allCircle {   0% {    -webkit-transform: translateX(-50px) translateY(-500px) translateZ(0) rotateX(0deg) rotateY(30deg) rotate(0deg);    transform: translateX(-50px) translateY(-500px) translateZ(0) rotateX(0deg) rotateY(30deg) rotate(0deg);   }   to {    -webkit-transform: translateX(-50px) translateY(-500px) translateZ(0) rotateX(0deg) rotateY(-5deg) rotate(0deg);    transform: translateX(-50px) translateY(-500px) translateZ(0) rotateX(0deg) rotateY(-5deg) rotate(0deg);   }  }  @keyframes allCircle {   0% {    -webkit-transform: translateX(-50px) translateY(-500px) translateZ(0) rotateX(0deg) rotateY(30deg) rotate(0deg);    transform: translateX(-50px) translateY(-500px) translateZ(0) rotateX(0deg) rotateY(30deg) rotate(0deg);   }   to {    -webkit-transform: translateX(-50px) translateY(-500px) translateZ(0) rotateX(0deg) rotateY(-5deg) rotate(0deg);    transform: translateX(-50px) translateY(-500px) translateZ(0) rotateX(0deg) rotateY(-5deg) rotate(0deg);   }  }  li[data-v-3dcdcd53] {   width: 450px;   height: 450px;   border: 2px solid #5ec0ff;   border-radius: 50%;   position: absolute;   -webkit-transform-style: preserve-3d;   transform-style: preserve-3d;  }  li span[data-v-3dcdcd53] {   width: 28px;   height: 28px;   border-radius: 50%;   position: absolute;  }  li .sp1[data-v-3dcdcd53] {   left: -14px;   top: 211px;  }  li .sp2[data-v-3dcdcd53] {   left: 311px;   top: 16px;  }  li .sp3[data-v-3dcdcd53] {   left: 311px;   top: 406px;  }  .circle1[data-v-3dcdcd53] {   -webkit-transform: rotateY(10deg);   transform: rotateY(10deg);   -webkit-animation: circle1 10s infinite linear;   animation: circle1 10s infinite linear;  }  .circle1 span[data-v-3dcdcd53] {   -webkit-transform: rotateX(-90deg) rotateY(-10deg);   transform: rotateX(-90deg) rotateY(-10deg);   -webkit-animation: circle1In 10s infinite linear;   animation: circle1In 10s infinite linear;  }  .circle2[data-v-3dcdcd53] {   -webkit-transform: rotateY(-35deg);   transform: rotateY(-35deg);   -webkit-animation: circle2 8s infinite linear;   animation: circle2 8s infinite linear;  }  .circle2 span[data-v-3dcdcd53] {   -webkit-transform: rotateX(-90deg) rotateY(35deg);   transform: rotateX(-90deg) rotateY(35deg);   -webkit-animation: circle2In 8s infinite linear;   animation: circle2In 8s infinite linear;  }  @-webkit-keyframes circle1 {   0% {    -webkit-transform: rotateY(10deg) rotate(0deg);    transform: rotateY(10deg) rotate(0deg);   }   30% {    -webkit-transform: rotateY(10deg) rotate(180deg);    transform: rotateY(10deg) rotate(180deg);   }   to {    -webkit-transform: rotateY(10deg) rotate(1turn);    transform: rotateY(10deg) rotate(1turn);   }  }  @keyframes circle1 {   0% {    -webkit-transform: rotateY(10deg) rotate(0deg);    transform: rotateY(10deg) rotate(0deg);   }   30% {    -webkit-transform: rotateY(10deg) rotate(180deg);    transform: rotateY(10deg) rotate(180deg);   }   to {    -webkit-transform: rotateY(10deg) rotate(1turn);    transform: rotateY(10deg) rotate(1turn);   }  }  @-webkit-keyframes circle1In {   0% {    -webkit-transform: translateX(0) translateY(0) translateZ(0) rotateX(-90deg) rotateY(-10deg) rotate(0deg);    transform: translateX(0) translateY(0) translateZ(0) rotateX(-90deg) rotateY(-10deg) rotate(0deg)   }   30% {    -webkit-transform: translateX(0) translateY(0) translateZ(0) rotateX(-90deg) rotateY(170deg) rotate(0deg);    transform: translateX(0) translateY(0) translateZ(0) rotateX(-90deg) rotateY(170deg) rotate(0deg)   }   to {    -webkit-transform: translateX(0) translateY(0) translateZ(0) rotateX(-90deg) rotateY(355deg) rotate(0deg);    transform: translateX(0) translateY(0) translateZ(0) rotateX(-90deg) rotateY(355deg) rotate(0deg)   }  }  @keyframes circle1In {   0% {    -webkit-transform: translateX(0) translateY(0) translateZ(0) rotateX(-90deg) rotateY(-10deg) rotate(0deg);    transform: translateX(0) translateY(0) translateZ(0) rotateX(-90deg) rotateY(-10deg) rotate(0deg)   }   30% {    -webkit-transform: translateX(0) translateY(0) translateZ(0) rotateX(-90deg) rotateY(170deg) rotate(0deg);    transform: translateX(0) translateY(0) translateZ(0) rotateX(-90deg) rotateY(170deg) rotate(0deg)   }   to {    -webkit-transform: translateX(0) translateY(0) translateZ(0) rotateX(-90deg) rotateY(355deg) rotate(0deg);    transform: translateX(0) translateY(0) translateZ(0) rotateX(-90deg) rotateY(355deg) rotate(0deg)   }  }  @-webkit-keyframes circle2 {   0% {    -webkit-transform: translateX(0) translateY(0) translateZ(0) rotateX(0deg) rotateY(-35deg) rotate(0deg);    transform: translateX(0) translateY(0) translateZ(0) rotateX(0deg) rotateY(-35deg) rotate(0deg)   }   70% {    -webkit-transform: translateX(0) translateY(0) translateZ(0) rotateX(0deg) rotateY(-35deg) rotate(180deg);    transform: translateX(0) translateY(0) translateZ(0) rotateX(0deg) rotateY(-35deg) rotate(180deg)   }   to {    -webkit-transform: translateX(0) translateY(0) translateZ(0) rotateX(0deg) rotateY(-35deg) rotate(1turn);    transform: translateX(0) translateY(0) translateZ(0) rotateX(0deg) rotateY(-35deg) rotate(1turn)   }  }  @keyframes circle2 {   0% {    -webkit-transform: translateX(0) translateY(0) translateZ(0) rotateX(0deg) rotateY(-35deg) rotate(0deg);    transform: translateX(0) translateY(0) translateZ(0) rotateX(0deg) rotateY(-35deg) rotate(0deg)   }   70% {    -webkit-transform: translateX(0) translateY(0) translateZ(0) rotateX(0deg) rotateY(-35deg) rotate(180deg);    transform: translateX(0) translateY(0) translateZ(0) rotateX(0deg) rotateY(-35deg) rotate(180deg)   }   to {    -webkit-transform: translateX(0) translateY(0) translateZ(0) rotateX(0deg) rotateY(-35deg) rotate(1turn);    transform: translateX(0) translateY(0) translateZ(0) rotateX(0deg) rotateY(-35deg) rotate(1turn)   }  }  @-webkit-keyframes circle2In {   0% {    -webkit-transform: translateX(0) translateY(0) translateZ(0) rotateX(-90deg) rotateY(35deg) rotate(0deg);    transform: translateX(0) translateY(0) translateZ(0) rotateX(-90deg) rotateY(35deg) rotate(0deg)   }   70% {    -webkit-transform: translateX(0) translateY(0) translateZ(0) rotateX(-90deg) rotateY(215deg) rotate(0deg);    transform: translateX(0) translateY(0) translateZ(0) rotateX(-90deg) rotateY(215deg) rotate(0deg)   }   to {    -webkit-transform: translateX(0) translateY(0) translateZ(0) rotateX(-90deg) rotateY(395deg) rotate(0deg);    transform: translateX(0) translateY(0) translateZ(0) rotateX(-90deg) rotateY(395deg) rotate(0deg)   }  }  @keyframes circle2In {   0% {    -webkit-transform: translateX(0) translateY(0) translateZ(0) rotateX(-90deg) rotateY(35deg) rotate(0deg);    transform: translateX(0) translateY(0) translateZ(0) rotateX(-90deg) rotateY(35deg) rotate(0deg)   }   70% {    -webkit-transform: translateX(0) translateY(0) translateZ(0) rotateX(-90deg) rotateY(215deg) rotate(0deg);    transform: translateX(0) translateY(0) translateZ(0) rotateX(-90deg) rotateY(215deg) rotate(0deg)   }   to {    -webkit-transform: translateX(0) translateY(0) translateZ(0) rotateX(-90deg) rotateY(395deg) rotate(0deg);    transform: translateX(0) translateY(0) translateZ(0) rotateX(-90deg) rotateY(395deg) rotate(0deg)   }  } </style></head><body> <div class="login">  <div class="lin" data-v-3dcdcd53="">   <div class="limg">    <img src="images/demo1/1.png" alt="img">   </div>   <ul data-v-3dcdcd53="" class="allCircle">    <li data-v-3dcdcd53="" class="circle1">     <span data-v-3dcdcd53="" class="sp1">      <img data-v-3dcdcd53="" src="images/icon/1.png" height="28" width="28" alt="">     </span>     <span data-v-3dcdcd53="" class="sp2">      <img data-v-3dcdcd53="" src="images/icon/2.png" height="28" width="28" alt="">     </span>     <span data-v-3dcdcd53="" class="sp3">      <img data-v-3dcdcd53="" src="images/icon/3.png" height="28" width="28" alt="">     </span>    </li>    <li data-v-3dcdcd53="" class="circle2">     <span data-v-3dcdcd53="" class="sp1">      <img data-v-3dcdcd53="" src="images/icon/4.png" height="28" width="28" alt="">     </span>     <span data-v-3dcdcd53="" class="sp2">      <img data-v-3dcdcd53="" src="images/icon/5.png" height="28" width="28" alt="">     </span>     <span data-v-3dcdcd53="" class="sp3">      <img data-v-3dcdcd53="" src="images/icon/6.png" height="28" width="28" alt="">     </span>    </li>   </ul>  </div> </div></body><html>
View Code

 原理:  简单来说就是动画为一个ul整体,然后两个轨迹分别是里面的两个面,最后给他们添加不同的动画轨迹。

lin盒子为整个动画的最外层,包含中间的固定图片limg,以及动画ul。整个lin盒子的位置为如下图:(使行星运动轨迹为3D立体的旋转效果,沿着x轴旋转75deg,沿着z轴旋转5deg)

 

因为设置了-webkit-transform-style: preserve-3d;lin盒子中子元素同样有旋转效果。

故limg想要显示为正中间靠前就需要设置变换(相对于父级lin定位),效果如下图

 

而ul整体的面应为如下位置

 

ul中的行星运动轨迹即两个li位面,分别相对于ul整体位面来定位,两者的关系如图(红色的为ul位面):

 

最后再来看每个li圆圈中的小图标,同样将它四个小图标分别相对于li圆圈来定位就可以,定位效果如下

不过有个小问题,我们还需要将小图标旋转角度,因为li位面的角度问题,现在这样我们是看不到小图标的。

现在各个元素之间的位置关系已经设置好了,接下来就是添加动画效果了。我们来分析一下:
  • 从整体看,lin和limg是固定不变的,有动画效果的就是ul中的元素。
  • ul整体是沿着Z轴左右变换角度的,就好像跷跷板。动画效果为循环的allCircle,变化的值为rotateY(注意相对的坐标系为lin位面的);
  • 再看ul中的两个行星轨迹即两个li,他们就是在自己的位面上沿着中心轴旋转,就好像旋转的茶杯。动画效果为 circle1和circle2,变化的值为rotateZ;
  • 最后就是轨迹上的行星即小图标,他们相对于轨迹有自己的运行速度,就好像运动员跑步。动画效果为circle1In和circle2In,变化的值为rotateY;
 至此,完成,代码在上面。