五、动画 - 旋转rotate

news2024/10/7 12:23:29

1.简介
2.详解

一、简介

 通过旋转可以使元素沿着x, y,或者z选择指定的角度
      rotateX()
      rotateY()
      rotateZ()
 
 相关术语：
      45deg： 45度
      1turn 1圈， .5turn 半圈

二、详解

需求：在界面上定义一个box1, 放到视口中，当鼠标移动到他上面，box1开始旋转。

1.基础布局

<style>
    html{
    /* 添加了视距，就有了透视的效果*/
      perspective: 800px;
    }

    body{
      border:1px red solid;
      background-color: silver;
    }

    .box1{
      width: 100px;
      height: 100px;
      background-color: #bfa;
      margin: 200px auto;
      /* 当进行旋转的时候，这个动画是在2s内完成的*/
      transition: 2s;
    }

    body:hover .box1{
    /*绕着Z轴旋转：就是顺时针转45度*/
      transform: rotateZ(45deg);
    }
    
  </style>

<div class="box1"></div>

在这里插入图片描述

2.绕X轴旋转，就是水平方向，那你看到的效果，就是他在上下移动,往后仰一样。

 body:hover .box1{
    /*绕着x轴旋转：就是顺时针转45度*/
      transform: rotateX(45deg);
    }

在这里插入图片描述

3.绕Y轴旋转，就是竖直轴转，看起来像在推门效果

 body:hover .box1{
    /*绕着y轴旋转：就是顺时针转45度*/
      transform: rotateY(45deg);
    }

在这里插入图片描述

4.先Y轴旋转，会有推门效果，然后在往Z轴平移，就是右侧在移动100px, 看到效果就像在往右侧压缩折叠门。

关于这个rotateY 和translateZ 的配合使用，很多音乐网站，卡片这种动画翻转效果都用到了

 body:hover .box1{
   		 /* y写在前面，会先转，后往右移动，视图变小 ，反过来会变大*/
    	/*transform:rotateY(45deg) translateZ(100px); */
    	
    	/* y轴如果是负数，在写translateZ,会发现效果像在往左边压缩折叠门*/
    	/*transform:rotateY(-45deg) translateZ(100px); */
    	
    	/*如果y是360，效果就是围绕竖直的y轴，旋转一个360度，一圈*/
    	/* transform:rotateY(360deg) translateZ(100px);  */
    	
    	/*如果是y是180，效果是往后移动，把他的背面旋转过来，看起来有缩小效果 */
		/*transform:rotateY(180deg) translateZ(100px); */
		
		/*如果是translate在前，rotate在后，会发现，box1是先往前靠近移动，在旋转，看	 起来有放大效果，所以位置不同，透视效果不同 */
       /*transform:translateZ(400px) rotateY(180deg); */

	  /*如果我们不想要这种透视效果，只是让他绕固定的y轴，旋转 。*/
	   transform: rotateY(180deg);
    }

在这里插入图片描述

5.通常我们给box1设置了一个图片，然后让他绕y轴旋转180度，发现，正面，背面都是有图片的。如果现在我们想让他旋转到背面的时候，为空白。

    body:hover .box1{
      transform: rotateY(180deg);
        /* 是否显示元素的背面，如果是hidden，则转完后，看不到了背面的东西 */
      backface-visibility: hidden;
    }


  <div class="box1">
    <img src="an.jpg" alt="">
  </div>