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. Linux命令-grep,sed,awk

    grep (global search regular expression[RE] and print out the line) 正则表达式全局搜索并将行打印出来 在文件中查找包含字符串" ...

  2. c++-类与类的关系

    类与类的关系 #define _CRT_SECURE_NO_WARNINGS #include <iostream> using namespace std; class A { publ ...

  3. SVN清理失败(clean up)或者(lock)问题进入死循环最终解决方案

    解决方法: step1: 到 sqlite官网 (http://www.sqlite.org/download.html) 下载 sqlite3.exe step2: 将下载到的 sqlite3.ex ...

  4. Ubuntu18.04搭建测试环境

    前言 说一下我的情况,之前由于我的云服务器数据库的root账号密码123456太简单,而在之前的博客中也泄露出了我的云服务器的IP地址,导致有人远程连接我的数据库,删除了项目数据库里的数据只剩下WAR ...

  5. SpringCloud路由网关Zuul

    一.什么是网关 Zuul的主要功能是路由转发和过滤器.路由功能是微服务的一部分,比如/api/user转发到到user服务,/api/shop转发到到shop服务.zuul默认和Ribbon结合实现了 ...

  6. 一文带你深入了解JVM性能调优以及对JVM调优的全面总结

    目录 JVM调优 概念 基本垃圾回收算法 垃圾回收面临的问题 分代垃圾回收详述1 分代垃圾回收详述2 典型配置举例1 典型配置举例2 新一代的垃圾回收算法 调优方法 反思 一.JVM调优的一些概念 数 ...

  7. spinand之data buffer

    data buffer简介 spinand一般会有一个内置的data buffer. 以W25N01GV为例,一个page是2048bytes外加64bytes的spare数据,其data buffe ...

  8. maven搭建webservice apache cxf实现

    用 web方式发布 webService 服务端.客户端 一.服务器端搭建 1.首先创建 一个web工程(增加Maven依赖) 2.增加Maven依赖包,如下: <project xmlns=& ...

  9. 遇见手绘花卉小清新简约通用PPT模板推荐

    模版来源:http://ppt.dede58.com/jiaoxuekejian/26484.html

  10. Spring Boot Mybatis 最基本使用mysql存储过程

    首先声明:只是用最简单的方法大致了解如何用存储过程开发,如果需要查看存储过程创建语法的自行百度搜索 一.首先创建最基本的数据库 CREATE TABLE `t_user` ( `id` varchar ...