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的意思是“变焦”,虽然在摄影的领域经常被提到, ...
随机推荐
- Docker常用命令-全
原文内容来自于LZ(楼主)的印象笔记,如出现排版异常或图片丢失等问题,可查看当前链接: https://app.yinxiang.com/shard/s17/nl/19391737/9f6bf39e- ...
- Internet History,Technology,and Security - Technology: Internets and Packets (Week5)
Week5 Technology: Internets and Packets Welcome to Week 5! This week, we’ll be covering internets an ...
- AOP框架Dora.Interception 3.0 [5]: 基于策略的拦截器注册方式
注册拦截器旨在解决如何将拦截器应用到目标方法的问题.在我看来,针对拦截器的注册应该是明确而精准的,也就是我们提供的注册方式应该让拦截器准确地应用到期望的目标方法上,不能多也不能少.如果注册的方式过于模 ...
- iOS----------证书的制作
https://developer.umeng.com/docs/66632/detail/66748#createappid Certificates-> 卫生许可证 identifiers ...
- Things 3 for Mac是什么?如何使用?
为大家介绍一款实用的效率管理软件“Things 3 for Mac”,它通过使用标签和智能过滤条,东西结合了强大的功能和简单性,Leopard风格的来源列表可以快速轻松地进行对焦.与一个美丽的用户界面 ...
- Ubuntu 16.04 安装 CUDA10.1 (解决循环登陆的问题)
0. 前言 这里直接用 cuda安装文件同时安装 NVIDIA 驱动和 CUDA,没有单独安装更高版本的 NVIDIA 驱动: 此安装是在 Intel 集显下的图形化界面,即用集显做 display, ...
- 可编程实验板EPM1270T144C5蜂鸣器音调频率选择
always@(tone) begin case(tone) 'd1 : time_end=10'd1911 ;//L1 'd2 : time_end=10'd1702 ;//L2 'd3 : tim ...
- python语言的鸭子类型和强类型语言的多态
python语言的鸭子类型和强类型语言的多态 前面讲接口类的时候举过一个有关支付方式的例子,支付方式可以有几种,微信支付,支付宝支付,苹果支付等,这几个不同的支付都统一于支付,像这样几个类都统一于 某 ...
- linux服务器JDK1.8环境变量配置
1. 场景描述 软件老王年龄大了,新机器(Linxu)下,配置JDK环境变量老记不住,记录下,有需要的朋友参考下. 2. 解决方案 2.1 上传tar包 ftp上传tar包: jdk-8u181-li ...
- python 内置函数zip,map,三元,lambda表达式
#内置函数zip(),将多个可迭代对象(集合等)按照顺序进行组合成tuple元祖,放在zip 对象进行存储,: #当参数为空时候,返回空 #如果 zip() 函数压缩的两个列表长度不相等,那么 zip ...