FCC---Use the CSS Transform scale Property to Change the Size of an Element
To change the scale of an element, CSS has the transform property, along with its scale() function.
The following code example doubles the size of all the paragraph elements on the page:
p {
transform: scale();
}
练习题目:
Increase the size of the element with the id of ball2 to 1.5 times its original size.
练习代码:
<style>
.ball {
width: 40px;
height: 40px;
margin: auto;
position: fixed;
background: linear-gradient(
35deg,
#ccffff,
#ffcccc
);
border-radius: %;
}
#ball1 {
left: %;
}
#ball2 {
left: %;
<!-- 仅在此处填空既可,无需写全部代码-->
transform: scale(1.5);
}
</style> <div class="ball" id= "ball1"></div>
<div class="ball" id= "ball2"></div>
效果:

FCC---Use the CSS Transform scale Property to Change the Size of an Element的更多相关文章
- FCC---Use the CSS Transform scale Property to Scale an Element on Hover
The transform property has a variety of functions that let you scale, move, rotate, skew, etc., your ...
- css3-12 transform:scale(1.2,1.2)实现移入元素变大特效
css3-12 transform:scale(1.2,1.2)实现移入元素变大特效 一.总结 一句话总结:transform:scale(1.2,1.2)鼠标移入的时候变大一点点,超出边框的部分隐藏 ...
- css中zoom和transform:scale的区别
css中zoom和transform:scale的区别 关于zoom: 以前只是看到别人的代码中用过zoom,自己从未使用过,今天在探究ie7兼容inline-block时,发现里面提到了zoom.下 ...
- css 中 zoom和transform:scale的区别(转载)
一.IE和Chrome等浏览器与zoom 还在几年前,zoom还只是IE浏览器自己私有的玩具,但是,现在,除了FireFox浏览器,其他,尤其Chrome和移动端浏览器已经很好支持zoom属性了: z ...
- FCC---Use the CSS Transform Property skewX to Skew an Element Along the X-Axis
The next function of the transform property is skewX(), which skews the selected element along its X ...
- zoom和transform:scale()的区别
zoom和transform:scale()都可以用于缩放,目前移动端存在各种各样不同屏幕大小的手机,为了兼容不同宽度的屏幕,我们可以基于某一屏幕宽度大小(比如iPhone5的320,这个根据设计稿来 ...
- zoom和transform:scale的区别
小tips: zoom和transform:scale的区别 这篇文章发布于 2015年11月3日,星期二,00:52,归类于 css相关. 阅读 7876 次, 今日 8 次 by zhangxin ...
- zoom与transform:scale的区别
一. zoom特性 1. zoom是IE的私有属性,但目前除Firefox不支持外,其他浏览器支持尚好. 2.定义: zoom即变焦,可改变元素尺寸,属于真实尺寸.zoom:百分值/数值/normal ...
- 2D转换下的zoom和transform:scale的区别
一.什么是zoom 在我们做项目和查看别人的网页的时候总会在一些元素的样式里,看到有一个家伙孤零零的待在那里,它到底是谁呢? 它的名字叫zoom,zoom的意思是“变焦”,虽然在摄影的领域经常被提到, ...
随机推荐
- 1、看源码MVC如何实例化控制器?
我们知道MVC请求进来,然后路由匹配,然后找到控制器和Action,最后会调用Action方法,但是大家想想控制器是个普通的类,Action是个普通的实例方法,要想调用Action必须先实例化控制器, ...
- 松软科技Web课堂:重要->JavaScript 调试
错误总会发生,每当您写一些新的计算机代码时. JavaScript 调试 在没有调试器的情况下写 JavaScript 是有难度的. 您的代码中也许包含了语法错误,或者逻辑错误,这些都难以诊断. 通常 ...
- SAP中的数据库表索引
数据库表中的索引可以加快查询的速度.索引是数据库表字段的有序副本.附加的字段包含指向真实数据库表行的指针.排序可以使访问表行的速度变快,例如,可以使用二分搜索.数据库表至少有一个主索引,由它的key字 ...
- C++之运算符优先级顺序表
[注] sizeof 的操作数不能是 C 风格转型:表达式 sizeof (int) * p 无歧义地解释成 (sizeof(int)) * p ,而非 sizeof((int)*p). 条件运算符中 ...
- 整理h5移动端适配方案
<使用Flexible实现手淘H5页面的终端适配>:https://github.com/amfe/article/issues/17 <再聊移动端页面的适配>:https:/ ...
- js 淡入淡出的tab选项卡
代码如下 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF- ...
- 超宽banner图在版心居中
步骤如下: 1.版心盒子设置相对定位relative 2.banner图设置绝对定位,设置block,清除默认的间距 3.banner图的left设置:left:50%: margin-left:- ...
- Eclipse如何重置窗口
https://jingyan.baidu.com/article/915fc41459585f51394b20c3.html 在Eclipse进行开发的时候,我们经常会由于这个窗口或者那个窗口没有打 ...
- MySQL数据库:数据完整性及约束的应用
数据完整性 1.域完整性:---------匹配完整性:非空.缺省 字段/列 2.实体完整性:-------匹配完整性:主键.唯一键 记录/行 3.引用完整性:-------匹配完整性:外键 表与表之 ...
- centos查询目标文件文件所在位置
之前有试过whereis这种语法但是查询文件不大理想.然后找到了下边这种方式可以很好的查询目标文件的位置 #在根目录 /下查找所有叫nginx的文件 find / -name nginx