14-transform样式详解

14-transform样式详解

1、旋转 transform: rotate

列如：

scale(x/y)缩放

transform: scale(2,3);括号里面是倍数

transform: scaleX(2)

transform: scaleY(3)

缩放值：1、>1放大 2、1>x>0缩小 3/0>x>-1把元素倒置缩小 4、<-1元素倒置放大

  <style>div{width: 200px;height: 200px;background-color: brown;margin: 50px auto;/* scale(x/y)缩放 *//* transform: scale(2,3);括号里面是倍数 *//* transform: scaleX(2);transform: scaleY(3); *//* transform: scaleX(2); *//* 缩放值：1、>1放大  2、1>x>0缩小 3/0>x>-1把元素倒置缩小 4、<-1元素倒置放大*/transform: scaleY(3);}</style>
</head>
<body><!-- 驼峰命名法 前面是小写后面是大写scaleX --><div></div>

运行结果·：

transform: translate(x,y) 位移

<style>div{width: 200px;height: 200px;background-color: pink;/* transform: translate(x,y) 位移*//* transform: translate(100px,100px); */animation: translate 3s;}@keyframes translate{/* 0%===from */0%{transform: translate(0,0);}50%{transform: translate(400px,0);}/* 100% ===to */100%{transform: translate(0,200px);}}</style>
</head>
<body><div></div>
</body>

skew（x,y）倾斜

 <style>div{width: 400px;height: 400px;}.fa{margin: 100px auto;border: 1px solid palevioletred;}.son{background-color: powderblue;/* skew（x,y） 倾斜 *//* transform: skew(30deg); *//* transform: skewY(40deg); */transform: skew(20deg, 30deg); }</style>
</head>
<body><div class="fa"> <div class="son"></div></div>
</body>

运行结果·：

复合写法

复合写法没有规定书写顺序，但是顺序不同会导致结果不同

变化样式之变化原点transform-origin

默认值 transform-origin: 50% 50%;元素中心

transform-origin:0% 0% ; 变化原点在元素左上角

负值：变化原点在元素外面

14-transform样式详解相关推荐

Matplot pyplot绘制单图，多子图不同样式详解，这一篇就够了
Matplot pyplot绘制单图,多子图不同样式详解,这一篇就够了 1. 单图单线 2. 单图多线不同样式(红色圆圈.蓝色实线.绿色三角等) 3. 使用关键字字符串绘图(data 可指定依赖值为: ...
html 仿word页面,HTML+CSS入门 HTML页面仿WORD样式详解
本篇教程介绍了HTML+CSS入门 HTML页面仿WORD样式详解,希望阅读本篇文章以后大家有所收获,帮助大家HTML+CSS入门. < 要求不再浏览器中添加office插件的前提下.展示WOR ...
JSX设置CSS样式详解
JSX设置CSS样式详解 1. 使用className设置样式(CSS的其他选择器也是同理) (1)定义一个CSS文件style.css,和普通CSS一样定义class选择器 .sty1{//和普通C ...
EMD算法之Hilbert-Huang Transform原理详解和案例分析
目录 Hilbert-Huang Transform 希尔伯特-黄变换 Section I 人物简介 Section II Hilbert-Huang的应用领域 Section III Hilbert ...
网页设计中的默认字体样式详解
浏览器默认的样式往往在不同的浏览器.不同的语言版本甚至不同的系统版本都有不同的设置,这就导致如果直接利用默认样式的页面在各个浏览器下显示非常不一致,于是就有了类似YUI的reset之类用来尽量重写浏 ...
14.VisualVM使用详解、15.VisualVM堆查看器使用的内存不足、19.class文件--文件结构--魔数、20.文件结构--常量池、21.文件结构访问标志（2个字节）、22.类加载机制概
14.VisualVM使用详解 15.VisualVM堆查看器使用的内存不足 16.性能调优概述 17.性能调优–案例1 18.性能调优-案例三 19.class文件–文件结构–魔数 20.文件结构– ...
devexpress 中的checkboxlist怎么设置间距_HTML中怎么设置h1的字体样式你知道吗？关于设置h1标签的样式详解
本篇文章主要为大家讲解了html中的h1标签的样式解析,但是如果不用css样式来做的话,那就只能在html4.01中显示了,所以我们还是尽快学习css层叠样式表吧,好了,现在让我们来说说这篇文章吧. ...
mysql5.7.14安装版_MySql5.7.14安装教程详解(解压版)_MySQL
下面进入正式的教程: 第一步:下载最近的MySQL文件并且解压: 下载最新版的MySQL–mysql-5.7.12下载地址将下载到的文件解压缩到自己喜欢的位置,例如我自己的位置是D:\MySQL\m ...
qt怎么设置标签背景图片_HTML中怎么设置h1的字体样式你知道吗？关于设置h1标签的样式详解...
本篇文章主要为大家讲解了html中的h1标签的样式解析,但是如果不用css样式来做的话,那就只能在html4.01中显示了,所以我们还是尽快学习css层叠样式表吧,好了,现在让我们来说说这篇文章吧. ...

14-transform样式详解

14-transform样式详解相关推荐

最新文章

热门文章