前言

大家好，我是汪小成。最近在学习Canvas。这篇文章是我学习Canvas变形操作时记的笔记，欢迎大家审阅。

简介

一、界面功能：

1. 动态龙舟特效：底部龙舟划过水面留下波纹轨迹（SVG+JS动画实现）

今天躺在床上刷抖音的时候，看见了一个马克笔随便画星空的视频，很有意思。

先看效果：

开始需求分析：

1、渐变色的背景

2、画一颗树和一些草

3、水面的倒影

4、随便画点星星

5、画一颗流星

画布操作介绍

画布绘图的环境通过translate,scale,rotate, setTransform和transform来改变，它们会对画布的变换矩阵产生影响。

抽奖和开盲盒性质一样的都是通过ajax读取后台的随机数据。

1、转轮盘

本来是想直接绘图实现轮盘，但是没有找到怎么填充文字，只好把轮盘弄成了背景图，通常用于游戏抽道具，商城积分抽奖，公司年末员工抽奖

1. 点击抽奖触发jquery的click事件；

基于css3新属性transform，实现3d立方体的旋转

通过原生JS，点击事件，鼠标按下、鼠标抬起和鼠标移动事件，实现3d立方体的拖动旋转，并将旋转角度实时的反应至界面上显示

实现原理：通过获取鼠标点击屏幕时的坐标和鼠标移动时的坐标，来获得鼠标在X轴、Y轴移动的距离，将距离实时赋值给transform属性

从而通过改变transform：rotate属性值来达到3d立方体旋转的效果

HTML代码块：

“这里是云端源想IT，帮你轻松学IT”

大家好，今天给大家介绍一款，css实现的图片悬停旋转弹出文本框html页面前端源码（图1）。送给大家哦，获取方式在本文末尾。

当鼠标经过图片的时候，就会激活旋转和文本弹出事件，非常适合用在图片展示的功能中（图2）

兄弟们，今天咱来搞点好玩的 —— 用 CSS 整一个 3D 轮播图！咱野生程序员就是要在代码里找乐子，技术和快乐咱都得要！代码是写不完的，但咱能自己敲出快乐来，走起！