目录

SVG 学习<一>基础图形及线段

SVG 学习<二>进阶 SVG世界,视野,视窗 stroke属性 svg分组

SVG 学习<三>渐变

SVG 学习<四> 基础API

SVG 学习<五> SVG动画

SVG 学习<六> SVG的transform

SVG 学习<七> SVG的路径——path(1)直线命令、弧线命令

SVG 学习<八> SVG的路径——path(2)贝塞尔曲线命令、光滑贝塞尔曲线命令

(转)利用 SVG 和 CSS3 实现有趣的边框动画

++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

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的更多相关文章

  1. SVG 学习<八> SVG的路径——path(2)贝塞尔曲线命令、光滑贝塞尔曲线命令

    目录 SVG 学习<一>基础图形及线段 SVG 学习<二>进阶 SVG世界,视野,视窗 stroke属性 svg分组 SVG 学习<三>渐变 SVG 学习<四 ...

  2. SVG 学习<七> SVG的路径——path(1)直线命令、弧线命令

    目录 SVG 学习<一>基础图形及线段 SVG 学习<二>进阶 SVG世界,视野,视窗 stroke属性 svg分组 SVG 学习<三>渐变 SVG 学习<四 ...

  3. SVG 学习<五> SVG动画

    目录 SVG 学习<一>基础图形及线段 SVG 学习<二>进阶 SVG世界,视野,视窗 stroke属性 svg分组 SVG 学习<三>渐变 SVG 学习<四 ...

  4. 2. svg学习笔记-svg中的坐标系统和viewbox

    我是通过<SVG精髓>这本书学习的svg,说实话,这本书写的不好,或者说翻译的不好,我没有看过这本书的原版,不知道原文写的怎么样,但是翻译出来的有些句子真的很拗口.以前老师给我们API文档 ...

  5. HTML5学习(六)---------SVG 与Canvas

    参考教程:http://www.w3school.com.cn/html5/html_5_canvas_vs_svg.asp Canvas 和 SVG 都允许您在浏览器中创建图形,但是它们在根本上是不 ...

  6. SVG 学习<四> 基础API

    目录 SVG 学习<一>基础图形及线段 SVG 学习<二>进阶 SVG世界,视野,视窗 stroke属性 svg分组 SVG 学习<三>渐变 SVG 学习<四 ...

  7. SVG 学习<三>渐变

    目录 SVG 学习<一>基础图形及线段 SVG 学习<二>进阶 SVG世界,视野,视窗 stroke属性 svg分组 SVG 学习<三>渐变 SVG 学习<四 ...

  8. SVG 学习<二>进阶 SVG世界,视野,视窗 stroke属性 svg分组

    目录 SVG 学习<一>基础图形及线段 SVG 学习<二>进阶 SVG世界,视野,视窗 stroke属性 svg分组 SVG 学习<三>渐变 SVG 学习<四 ...

  9. SVG 学习<一>基础图形及线段

    目录 SVG 学习<一>基础图形及线段 SVG 学习<二>进阶 SVG世界,视野,视窗 stroke属性 svg分组 SVG 学习<三>渐变 SVG 学习<四 ...

随机推荐

  1. Hadoop数据分析实例:P2P借款人信用风险实时监控模型设计

    Hadoop数据分析实例:P2P借款人信用风险实时监控模型设计 一提到hadoop相信熟悉IT领域或者经常关注互联网新闻的朋友都应该很熟悉了,当然,这种熟悉可能也只是听着名字耳熟,但并不知道它具体是什 ...

  2. [转]TA-Lib 安装

    转自:https://mrjbq7.github.io/ta-lib/install.html Installation You can install from PyPI: $ pip instal ...

  3. 基于STM32的红外遥控重点解析

    本文有两个内容:一.红外遥控协议的的讲解:二.解码程序解析(参考正点原子的代码) 红外的介绍.优点.缺点就不给大家说了,进入正题 一.红外遥控协议的的讲解 红外遥控的编码目前广泛使用的是:NEC Pr ...

  4. 日期控件My97 DatePicker 的使用

    1.解压后添加My97DatePicker文件夹 2.引入WdatePicker.js文件 日期控件My97DatePicker的使用.html <!DOCTYPE html> <h ...

  5. jersey2+freemarker+spring3的集成

    由于即将开始的新项目,是一个对外网开放访问权限的web应用.所以,公司技术管理层不允许使用struts以及spring mvc这一套.所以,我们开始转战曾经用作REST API的框架jersey及其周 ...

  6. fastdfs远程服务器java连接失败的问题

    異常如下: java.net.SocketTimeoutException: connect timed out at java.net.DualStackPlainSocketImpl.waitFo ...

  7. button高度改变

    代码:<input type="button" name="submit" value="submit" /> 利用css改变b ...

  8. 【springBoot】之定制Banner

    springboot启动时控制台打印图案如下: 1.假如我们不想看到这个图案 public static void main(String[] args) { SpringApplication ap ...

  9. 我的第一个react native

    虽然react native出来了很久,但是自己一直因为各种原因没有接触学习,中间尝试过一次,但是因为复杂的环境配置而放弃了.现在,终于因为公司的项目不得不去学习了,当然了,再配置开发环境上面,我还是 ...

  10. android手机截屏、录屏

    1. 手动截屏,通过其他第三方软件发送截图,或者从手机取出截图 2. 使用命令截图,将截图保存到手机,再拉取到电脑 #!/bin/sh #运行 sh screenshot name picName=$ ...