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

  1. 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 ...

  2. css3-12 transform:scale(1.2,1.2)实现移入元素变大特效

    css3-12 transform:scale(1.2,1.2)实现移入元素变大特效 一.总结 一句话总结:transform:scale(1.2,1.2)鼠标移入的时候变大一点点,超出边框的部分隐藏 ...

  3. css中zoom和transform:scale的区别

    css中zoom和transform:scale的区别 关于zoom: 以前只是看到别人的代码中用过zoom,自己从未使用过,今天在探究ie7兼容inline-block时,发现里面提到了zoom.下 ...

  4. css 中 zoom和transform:scale的区别(转载)

    一.IE和Chrome等浏览器与zoom 还在几年前,zoom还只是IE浏览器自己私有的玩具,但是,现在,除了FireFox浏览器,其他,尤其Chrome和移动端浏览器已经很好支持zoom属性了: z ...

  5. 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 ...

  6. zoom和transform:scale()的区别

    zoom和transform:scale()都可以用于缩放,目前移动端存在各种各样不同屏幕大小的手机,为了兼容不同宽度的屏幕,我们可以基于某一屏幕宽度大小(比如iPhone5的320,这个根据设计稿来 ...

  7. zoom和transform:scale的区别

    小tips: zoom和transform:scale的区别 这篇文章发布于 2015年11月3日,星期二,00:52,归类于 css相关. 阅读 7876 次, 今日 8 次 by zhangxin ...

  8. zoom与transform:scale的区别

    一. zoom特性 1. zoom是IE的私有属性,但目前除Firefox不支持外,其他浏览器支持尚好. 2.定义: zoom即变焦,可改变元素尺寸,属于真实尺寸.zoom:百分值/数值/normal ...

  9. 2D转换下的zoom和transform:scale的区别

    一.什么是zoom 在我们做项目和查看别人的网页的时候总会在一些元素的样式里,看到有一个家伙孤零零的待在那里,它到底是谁呢? 它的名字叫zoom,zoom的意思是“变焦”,虽然在摄影的领域经常被提到, ...

随机推荐

  1. c++-面向对象类的示例-求周长面积,判断体积相等-文件操作和一般操作

    面向对象编程示例:求周长和面积 #define _CRT_SECURE_NO_WARNINGS #include <iostream> using namespace std; //圆的周 ...

  2. isNotBlank()和isNotEmpty()总结

    import org.apache.commons.lang.StringUtils; import org.junit.Test; public class Test{ //总结:isNotBlan ...

  3. Android 插件化开发(三):资源插件化

    在前面的文章中我们成功的加载了外部的Dex(Apk)并执行了插件的Bean代码.这时我们会想,能不能加载并运行插件Apk的Activity.答案当然是能,否则后续我们的研究就没意义了,但是想实现Act ...

  4. linux mysql 数据库复制

    一.主服务器配置 1.配置文件my.cnf的修改 [root@localhost mysql]# vim /etc/my.cnf #在[mysqld]中添加:server-id=1log_bin=ma ...

  5. 主说明:自动Undo管理的故障排除指南(Doc ID 1579081.1)

    Master Note: Troubleshooting guide for Automatic Undo Management (Doc ID 1579081.1) APPLIES TO: Orac ...

  6. Nginx核心流程及模块介绍

    Nginx核心流程及模块介绍 1. Nginx简介以及特点 Nginx简介: Nginx (engine x) 是一个高性能的web服务器和反向代理服务器,也是一个IMAP/POP3/SMTP服务器 ...

  7. React: 研究Flux设计模式

    一.简介 一般来说,State管理在React中是一种最常用的实现机制,使用这种state管理系统基本可以开发各种需求的应用程序.然而,随着应用程序规模的不断扩张,原有的这种State管理系统就会暴露 ...

  8. Vue---记一次通过{{}}获取json数据-页面渲染不出来的坑

    前两天干活儿的时候碰到一个Vue的问题,让我这个菜鸡完全摸不到头脑,需求如下:前端页面点击表格中的某一行的详情按钮,会弹出一个Dialog,然后Dialog中有选项卡,选项卡中再有具体的table来展 ...

  9. Microsemi Libero使用技巧——查看芯片资源占用情况

    前言 与MCU不同,FPGA的资源主要包括:逻辑资源,IO资源,Flash大小,PLL资源,SoC硬核处理器资源等,其中逻辑资源和IO资源是我们主要关心的,本篇文章将介绍,如何通过Microsemi ...

  10. 详解串行通信协议及其FPGA实现

    前言 好久没更新博客了,这篇文章写写停停,用了近一周的时间,终于写完了.本篇文章介绍,串口协议数据帧格式.串行通信的工作方式.电平标准.编码方式及Verilog实现串口发送一个字节数据和接收一个字节数 ...