SVG 学习<六> SVG的transform
目录
SVG 学习<二>进阶 SVG世界,视野,视窗 stroke属性 svg分组
SVG 学习<七> SVG的路径——path(1)直线命令、弧线命令
SVG 学习<八> SVG的路径——path(2)贝塞尔曲线命令、光滑贝塞尔曲线命令
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
SVG元素也有transform属性,位移、缩放、倾斜、旋转。
这次一次性把代码都贴出来算了。
HTML代码
<svg xmlns="http://www.w3.org/2000/svg">
<rect class="No1" />
<rect class="No2" />
<rect class="No3" />
<rect class="No4" />
<rect class="No5" />
<rect class="No6" />
<rect class="No7" transform="rotate(90,885 60)"/>
</svg>
css代码
/**/
.No1{ x:10px;y:10px;width:150px;height:100px;fill:rgb(255,150,0);stroke:none;transition:1s all; }
svg:hover .No1{ transform: translate(50px, 50px); }
/**/
.No2{ x:170px;y:10px;width:150px;height:100px;fill:rgb(0,250,255);stroke:none;transition:1s all; }
svg:hover .No2{ transform: rotateX(90deg); }
/**/
.No3{ x:330px;y:10px;width:150px;height:100px;fill:rgb(255,255,0);stroke:none;transition:1s all; }
svg:hover .No3{ transform: rotateY(90deg); }
/**/
.No4{ x:490px;y:10px;width:150px;height:100px;fill:rgb(255,0,0);stroke:none;transition:1s all; }
svg:hover .No4{ transform: rotate(88deg); }
/**/
.No5{ x:650px;y:10px;width:150px;height:100px;fill:rgb(0,255,0);stroke:none;transition:1s all; }
svg:hover .No5{ transform: skew(45deg); }
/**/
.No6{ x:10px;y:120px;width:150px;height:100px;fill:pink;stroke:none;transition:1s all; }
svg:hover .No6{ transform: scale(1.5,1.5); }
/**/
.No7{ x:810px;y:10px;width:150px;height:100px;fill:rgb(0,0,255);stroke:none; }
说明下:No6 是第二排粉色的,No7是第一排最后一个蓝色。
看过代码和案例图相信聪明的小伙伴已经知道怎么玩transform了吧。看懵的也没事,这里简单解释一下。
元素旋转rotate
rotate 2D旋转圆心为svg左上角的点;
rotateY 3Dy轴旋转以svg上边为轴心;
rotateX 3Dx轴旋转以svg左边为轴心;
元素位移translate
设置translate后则会以矩形左上角(圆形和椭圆则为圆心)为x0 y0创建出相对坐标系,位移坐标则对应相对坐标系中的坐标。
参考资料:CSS3动画特效——transform详解 和 张鑫旭的详细讲解
SVG 学习<六> SVG的transform的更多相关文章
- SVG 学习<八> SVG的路径——path(2)贝塞尔曲线命令、光滑贝塞尔曲线命令
目录 SVG 学习<一>基础图形及线段 SVG 学习<二>进阶 SVG世界,视野,视窗 stroke属性 svg分组 SVG 学习<三>渐变 SVG 学习<四 ...
- SVG 学习<七> SVG的路径——path(1)直线命令、弧线命令
目录 SVG 学习<一>基础图形及线段 SVG 学习<二>进阶 SVG世界,视野,视窗 stroke属性 svg分组 SVG 学习<三>渐变 SVG 学习<四 ...
- SVG 学习<五> SVG动画
目录 SVG 学习<一>基础图形及线段 SVG 学习<二>进阶 SVG世界,视野,视窗 stroke属性 svg分组 SVG 学习<三>渐变 SVG 学习<四 ...
- 2. svg学习笔记-svg中的坐标系统和viewbox
我是通过<SVG精髓>这本书学习的svg,说实话,这本书写的不好,或者说翻译的不好,我没有看过这本书的原版,不知道原文写的怎么样,但是翻译出来的有些句子真的很拗口.以前老师给我们API文档 ...
- HTML5学习(六)---------SVG 与Canvas
参考教程:http://www.w3school.com.cn/html5/html_5_canvas_vs_svg.asp Canvas 和 SVG 都允许您在浏览器中创建图形,但是它们在根本上是不 ...
- SVG 学习<四> 基础API
目录 SVG 学习<一>基础图形及线段 SVG 学习<二>进阶 SVG世界,视野,视窗 stroke属性 svg分组 SVG 学习<三>渐变 SVG 学习<四 ...
- SVG 学习<三>渐变
目录 SVG 学习<一>基础图形及线段 SVG 学习<二>进阶 SVG世界,视野,视窗 stroke属性 svg分组 SVG 学习<三>渐变 SVG 学习<四 ...
- SVG 学习<二>进阶 SVG世界,视野,视窗 stroke属性 svg分组
目录 SVG 学习<一>基础图形及线段 SVG 学习<二>进阶 SVG世界,视野,视窗 stroke属性 svg分组 SVG 学习<三>渐变 SVG 学习<四 ...
- SVG 学习<一>基础图形及线段
目录 SVG 学习<一>基础图形及线段 SVG 学习<二>进阶 SVG世界,视野,视窗 stroke属性 svg分组 SVG 学习<三>渐变 SVG 学习<四 ...
随机推荐
- xcrun: error: invalid active developer path
问题 mac升级到10.12(macOS Sierra),执行命令,出现如下错误: xcrun: error: invalid active developer path (/Library/Deve ...
- CoreException: Could not get the value for parameter compilerId for plugin execution default-compile Maven项目pom文件报错,插件引用不到
CoreException: Could not get the value for parameter compilerId for plugin execution default-compile ...
- Azure ARM (15) 根据现有VHD文件,创建ARM VM
<Windows Azure Platform 系列文章目录> 在很多时候,我们需要根据现有VHD文件,创建ARM VM.在这里笔者简单介绍一下相关的Azure PowerShell 这里 ...
- 【VSCode】Windows下VSCode编译调试c/c++【更新】
便携版已更新,点此获取便携版 用于cpptools插件的配置文件更新 更新的launch.json // Available variables which can be used inside of ...
- input输入框type=number时的一个缺陷
本来是在vue里发现获取不到 input[ type="number"]的值,就是输入两个小数点的数值,比如1.1.1,以为是vue的错误,然而不是,vue只做了数字处理 不明白为 ...
- DS二叉树--叶子数量
题目描述 计算一颗二叉树包含的叶子结点数量. 提示:叶子是指它的左右孩子为空. 建树方法采用“先序遍历+空树用0表示”的方法,即给定一颗二叉树的先序遍历的结果为AB0C00D00,其中空节点用字符‘0 ...
- window7环境MySql5.7 zip安装配置教程
1.将zip压缩包解压到一个目录下,并改名为mysql5.7 我的是放在D:\web\mysql5.7下 2.修改my-default.ini文件 下面几项是必填的,否则无法启动 basedir = ...
- Netty Tutorial Part 1: Introduction to Netty [z]
Netty Tutorial, Part 1: Introduction to Netty Update: Part 1.5 Has Been Published: Netty Tutorial P ...
- 配置文件elasticsearch.yml详解
在es根目录下的config目录中有elasticsearch.yml配置文件,es加载使用的yml格式配置 17行:cluster.name: 自定义集群名称(强烈推荐默认名称elasticsear ...
- 服务容错保护断路器Hystrix之二:Hystrix工作流程解析
一.总运行流程 当你发出请求后,hystrix是这么运行的 红圈 :Hystrix 命令执行失败,执行回退逻辑.也就是大家经常在文章中看到的“服务降级”. 绿圈 :四种情况会触发失败回退逻辑( fal ...