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. 【CV现状-3.0】"目标"是什么

    #磨染的初心--计算机视觉的现状 [这一系列文章是关于计算机视觉的反思,希望能引起一些人的共鸣.可以随意传播,随意喷.所涉及的内容过多,将按如下内容划分章节.已经完成的会逐渐加上链接.] 缘起 三维感 ...

  2. Visual Studio 2019使用码云设置过滤忽略的文件或文件夹(ignore file)

    Visual Studio 2019使用码云的时候,会遇到 “Git failed with a fatal error.error: open(".vs/{{项目名称}}/Server/s ...

  3. 【Dos】复制指定文件夹下所有文件到另外指定文件夹下

    bat代码如下: @echo off @set /p fromFile=from: @set /p toFile=to: rem 找到所有文件 dir /b /s %fromFile%\ *.gz & ...

  4. leetcode菜鸡斗智斗勇系列(3)--- Jewels and Stones珠宝和钻石

    1.原题: https://leetcode.com/problems/jewels-and-stones/ You're given strings J representing the types ...

  5. Java连载61-异常的机制与分类

    一.is a.is like a.has a 1.is a(就是继承) public class Animal{ public void method1{ } } public class Dog e ...

  6. IT兄弟连 HTML5教程 使用盒子模型的浮动布局

    虽然使用绝对定位可以实现页面布局,但由于调整某个盒子模型时其他盒子模型的位置并不会跟着改变,所以并不是布局的首选方式.而使用浮动的盒子模型可以向左或向右移动,直到它的外边缘碰到包含它的盒子模型边框或另 ...

  7. .NET Core AES-CCM&AES-GCM加密算法

    一. 前言 关于 CCM 以及 GCM 看此文( CCM和GCM )或者直接搜索网上资料. .NET Core 3.0 实现了对AES-GCM和AES-CCM加密的支持.这些算法既是带有关联数据的身份 ...

  8. 1.编译spring源码

    本文是作者原创,版权归作者所有.若要转载,请注明出处 下载spring源码,本文用的是版本如下: springframework 5.1.x,   IDE工具idea 2019.2.3    JAVA ...

  9. iOS利用剪切板在app中传递信息

    利用iOS剪切板在app中传递信息 App1 中添加URLSchemes   app1 App2 中国添加URLSchemes   app2 App1中进入app2: UIApplication.sh ...

  10. jeecg代码生成器配置及常见问题

    jeecg_database.properties 以mysql为例: diver_name=com.mysql.jdbc.Driver url=jdbc:mysql://192.168.*.*:33 ...