五、动画 - 旋转rotate

这篇具有很好参考价值的文章主要介绍了五、动画 - 旋转rotate。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

目录:

  • 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>

五、动画 - 旋转rotate

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

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

五、动画 - 旋转rotate

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

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

五、动画 - 旋转rotate

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);
    }
    

五、动画 - 旋转rotate

5.通常我们给box1设置了一个图片,然后让他绕y轴旋转180度,发现,正面,背面都是有图片的。如果现在我们想让他旋转到背面的时候,为空白。文章来源地址https://www.toymoban.com/news/detail-505524.html

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


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


到了这里,关于五、动画 - 旋转rotate的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • OpenCV图像旋转(cv::rotate)与镜像(cv::flip)

    案例:使用OpenCV实现图像的旋转和镜像操作 所用函数:这里主要使用到了两个函数 1.旋转:cv::rotate 2.镜像:cv::flip   本文福利, 莬 费领取Qt开发学习资料包、技术视频,内容包括(C++语言基础,Qt编程入门,QT信号与槽机制,QT界面开发-图像绘制,QT网络,QT数据库编程,Q

    2024年02月16日
    浏览(47)
  • LeetCode in Python 48. Rotate Image/Matrix (旋转图像/矩阵)

    旋转图像/矩阵的重点是寻找旋转前后对应位置的坐标关系。 示例: 图1 旋转图像/矩阵的输入输出示意图  代码:  解释: 1)外层循环控制需要转的大圈圈数,内层循环控制每一圈需要转的小圈圈数,大小圈数的解释见图2,例如n=4,需要循环n // 2 = 2大圈,其中黄色循环箭头

    2024年04月27日
    浏览(55)
  • Vue Baidu Map图标旋转rotation失败且控制台一直报错

    报错如下:  解决: 官方文档:Vue Baidu Map

    2023年04月09日
    浏览(50)
  • opencv图像旋转和翻转,cv2.flip,cv2.rotate

    目录 翻转图像 图像旋转         opencv中使用cv2.filp可以实现图像翻转 src:输入图像 flipCode:flipCode 一个标志来指定如何翻转数组;0表示上下翻转,正数表示左右翻转,负数表示上下左右都翻转。 dst:输出图像         下面代码对图像进行不同旋转。         opencv中使

    2024年02月15日
    浏览(69)
  • C#,二进制数的按位旋转(Bits Rotate)算法与源代码

    二进制数的按位旋转(翻转)是编程中常见的按位运算方法。 二进制数的按位旋转分为左转、右转。 左转意味着数据变大,右转意味着数据变小(有损)。 using System; using System.Text; using System.Collections; using System.Collections.Generic; namespace Legalsoft.Truffer.Algorithm {     public static

    2024年02月19日
    浏览(39)
  • css的rotate3d实现炫酷的圆环转动动画

    2.1 rotate3d rotate3d:rotate3d() CSS 函数定义一个变换,它将元素围绕固定轴移动而不使其变形。运动量由指定的角度定义; 如果为正,运动将为顺时针,如果为负,则为逆时针。 语法: 含义: x 类型,可以是 0 到 1 之间的数值,表示旋转轴 X 坐标方向的矢量。 y 类型,可以是 0

    2024年02月02日
    浏览(46)
  • 如何将图片恢复水平位置?图片旋转矫正方法大全,ddddocr作者基于RotNet的旋转验证码深度学习识别模型Rotate-Captcha-Crack

    该模型首先使用边缘检测算法对图像进行边缘检测,然后找到边缘上的直线,并计算直线的角度。最后通过旋转图像来校正图像的角度。 该模型基于Hough变换算法来检测图像中的直线,并计算直线角度,然后使用旋转矩阵将图像旋转到正确的角度。 该模型使用图像的局部特征

    2024年02月08日
    浏览(59)
  • OpenCV-Python学习(20)—— OpenCV 图像几何变换之图像旋转(cv.warpAffine、cv.getRotationMatrix2D、cv.rotate、np.rot90)

    1. 学习目标 学习旋转矩阵; 学习使用 OpenCV 的 cv.warpAffine 函数进行图片的旋转; 学习使用 OpenCV 的 cv.getRotationMatrix2D 来计算不同旋转中心的不同角度的 MAR 旋转变换矩阵; 学习使用 OpenCV 的 cv.rotate 进行特殊角度的旋转(90,180,270 度)。 2. 不同中心的旋转矩阵计算 2.1 图像

    2024年02月09日
    浏览(40)
  • CSS——动画{旋转按钮}

    前面我们一直在学习样式,学习布局,什么浮动啊,定位呀,还有弹性盒子,那么今天我们来看一点不一样的——动画! 文章目录 前言 一、动画是什么? 二、动画的属性 1.过渡 2.实际应用和代码演示 总结 动画和过渡类似,都是可以实现⼀些动态效果,不同的是过渡需要在

    2023年04月20日
    浏览(42)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包