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的意思是“变焦”,虽然在摄影的领域经常被提到, ...
随机推荐
- 动态代理模式_应用(Redis工具类)
本次使用动态代理的初衷是学习Redis,使用Java操作Redis时用到Jedis的JedisPool,而后对Jedis的方法进一步封装完善成为一个工具类.因为直接使用Jedis对象时,为了保证性能, ...
- WFS服务查询方法
基于Geoserver发布的wfs服务,实现空间和属性信息的查询.wfs包含getFeature操作,用来检索要素信息,支持返回gml格式的地理要素表达. WFS的getFeature操作需要提供的参 ...
- MySQL基础-存储过程
存储过程 定义:将一批为了完成特定功能的SQL语句集,根据传入的参数(也可没有),调用,完成单个sql语句更复杂的功能 存储过程思想很简单,就是SQL语句层面上的代码封装和重用 优点:1) 可封装,并 ...
- webpack 插件 ProvidePlugin 的使用方法和 eslint 配置
ProvidePlugin:自动加载模块,而不必到处 import 或 require .(点击查看官方文档) 使用方法: 配置 webpack.config.js文件里 plugins 属性 new ...
- .Net Core WebApi 模型验证无效时报400
问题 模型验证无效时,没有进入到接口里,而是直接报400 Bad Request,非常不友好. 环境 SDK:.Net Core 2.2.401 开发工具:VS2017 step 1 创建接口 /// ...
- Python连载57- 邮件头和主题、解析邮件
一.添加邮件头,抄送等信息 1.mail["From"]表示发送者信息,包括姓名和邮件 2.mail["To"]表示接收者信息,包括姓名和邮件地址 3.mail ...
- 封装和@property
封装和@property 一.复习 1.接口类和抽象类 python中没有接口类,有抽象类,abc模块中的metaclass=ABCMeta,@abstructmethod,本质是做代码规范用的,希望 ...
- 从零开始的vue学习笔记(三)
事件处理 v-on 指令监听 DOM 事件,并在触发时运行一些 JavaScript 代码,示例: <div id="example-2"> <!-- `gree ...
- C# -- 模拟扑克牌发牌
C# -- 模拟扑克牌发牌 1. User 类: 玩家 public class User { private List<PaperCard> listCard = new List&l ...
- node error SOCKET error:10106
上周我的node.js command prompt出错了,什么也干不了 SOCKET error:10106 纠结两天,终于搞定了,其实比较简单,就是不会弄起来好麻烦 参考: 作者:忆常 url: ...