HTML5:七天学会基础动画网页8

2D缩放:scale

scale(x,y)   2D缩放转换,改变元素的宽度和                     高度,值为缩放的倍数。

scaleX(n)    2D缩放转换,改变元素的宽度。

scaleY(n)    2D播放转换,改变元素的高度。

跟前面提到的平移同理,后面这两个只能有一个生效,上面的会被下面的覆盖。

 例:我们随便给个div

<style>

        *{

            margin: 0;

            padding: 0;

        }

    .big{

        width: 100px;

        height: 100px;

        background-color: pink;

        margin: 40px auto;

    }

    .big:hover{

       transform: scale(1,2)

    }

    </style>

</head>

<body>

    <div class="big">

    </div>

33d95d58a2e9417ca3431ee91c1a83d1.png

 

鼠标放置后变化

72db2eb1280f40df929172fed819499b.png

 由此我们可知,scale括号内第一个值规定的是x轴的缩放倍数,第二个值规定的是y轴的缩放倍数,当我们只写一个值的时候宽高同时缩放:

.big:hover{

       transform: scale(2)

    }

28ae1abbed23483a8b20bfcd191a6ca5.png

我们想缩小时,这里以缩小一半为例:

 transform: scale(.5)

9a1ce9c9bf08499eb7a3ca6b6b50462a.png

 只想x/y缩小可以

transform: scaleX(.5)

transform: scaleY(.5)

还可以用它来隐藏元素:transform: scale(0)

缩放以中心为默认原点,可以用跟上一篇旋转相同的方法改变原点:transform-origin: ……

旋转缩放可以组合到一起: transform: scale(2) rotate(45deg) 注意写到相同标签后面不然是不生效的。

2D倾斜:skew---单位是deg(角度)

skew(x-angle,y-angle)  沿x,y轴倾斜。

skewX(angle)                   沿X轴倾斜。

skewY(angle)                   沿y轴倾斜。

例:

 .big:hover{
       transform: skew(10deg,20deg)
    }

e17ac4e5a9dd4e438c02017064ec33e3.png

 

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mfbz.cn/a/431439.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Redis 7.0版本主从复制机制

1、引言 Redis是一个开源、高性能、内存键值存储系统&#xff0c;同时也提供了数据结构服务器的功能。它支持五种主要的数据类型&#xff1a;字符串&#xff08;String&#xff09;、哈希表&#xff08;Hashes&#xff09;、列表&#xff08;Lists&#xff09;、集合&#xff…

Vue基础篇

Vue Vue是一套用于构建用户界面的渐进式JavaScript框架 什么是渐进式? Vue可以自底向上逐层地应用; 当构建简单应用时, 只需一个轻量小巧的核心库; 当构建复杂应用时, 可以引入各式各样的Vue插件 Vue具有以下特点: 采用组件化模式, 提高代码复用率且让代码更好维护 声明式编…

软考58-上午题-【数据库】-分布式数据库

一、四个透明 二、四种性质 三、真题 真题1&#xff1a; 真题2&#xff1a; 真题3&#xff1a; 真题4&#xff1a; 真题5&#xff1a;

10亿数据如何快速插入MySQL

最快的速度把10亿条数据导入到数据库,首先需要和面试官明确一下,10亿条数据什么形式存在哪里,每条数据多大,是否有序导入,是否不能重复,数据库是否是MySQL? 有如下约束 10亿条数据,每条数据 1 Kb 数据内容是非结构化的用户访问日志,需要解析后写入到数据库 数据存放在…

Linux笔记--静态库和动态库

库是指在我们的应用中&#xff0c;有一些公共代码是需要反复使用&#xff0c;就把这些代码编译为"库"文件;在链接步骤中&#xff0c;链接器将从库文件取得所需的代码&#xff0c;复制到生成的可执行文件中。 Linux中常见的库文件有两种&#xff0c;一种.a为后缀&…

【力扣白嫖日记】1045.买下所有产品的客户

前言 练习sql语句&#xff0c;所有题目来自于力扣&#xff08;https://leetcode.cn/problemset/database/&#xff09;的免费数据库练习题。 今日题目&#xff1a; 1045.买下所有产品的客户 表&#xff1a;Customer 列名类型customer_idintproduct_keyint 该表可能包含重复…

HashData的湖仓一体思考:Iceberg、Hudi特性讲解与支持方案

湖仓一体作为一种新兴的开放式数据管理架构&#xff0c;能够充分发挥数据湖的灵活性、生态丰富以及数据仓库的企业级数据分析能力&#xff0c;已经成为企业建设现代数据平台的热门选择。 在此前的直播中&#xff0c;我们分享了HashData湖仓一体方案架构设计与Hive数据同步。本…

2024金三银四--我们遇到的那些软件测试面试题【功能/接口/自动化/性能等等】

一、面试技巧题(主观题) 序号面试题1怎么能在技术没有那么合格的前提下给面试官留个好印象&#xff1f;2面试时&#xff0c;如何巧妙地避开不会的问题&#xff1f;面试遇到自己不会的问题如何机智的接话&#xff0c;化被动为主动&#xff1f;3对于了解程度的技能&#xff0c;被…

matlab 实现模糊C均值聚类

1. 原理 模糊c均值算法步骤&#xff1a; 1. 设定聚类数目c和加权指数b&#xff1a; 2. 初始化各个聚类中心m 3. 重复下面的运算&#xff0c;直到各个样本的隶属度值稳定&#xff1a;用当前的聚类中心根据下式计算隶属度函数&#xff1a; 用当前的隶属度函数按下式更新计算各…

fastApi笔记12-OAuth2 实现密码哈希与 Bearer JWT 令牌验证

JWT JWT(Json Web Token)是一种可以跨域的认证方案 jwt由三部分构成&#xff1a; 头部header&#xff1a;头部包含算法和token类型 核载payload&#xff1a;这部分用来保存自定义信息 签名signature&#xff1a;使用header和payload以及提供的秘钥&#xff0c;用header指定…

12c 32k strings新特性 varchar2/nvarchar2 32K

12c 32k strings新特性 varchar2/nvarchar2 32K 1、查看 SQL> show parameter MAX_STRING_SIZENAME TYPE VALUE ------------------------------------ ----------- ------------------------------ max_string_size …

Rust 开发的高性能 Python 包管理工具,可替换 pip、pip-tools 和 virtualenv

最近&#xff0c;我在 Python 潮流周刊 中分享了一个超级火爆的项目&#xff0c;这还不到一个月&#xff0c;它在 Github 上已经拿下了 8K star 的亮眼成绩&#xff0c;可见其受欢迎程度极高&#xff01;国内还未见有更多消息&#xff0c;我趁着周末把一篇官方博客翻译出来了&a…

12:Logstash|Web日志实时分析

Logstash|Web日志实时分析 logstashlogstash工作结构安装Logstash编写logstash配置文件步骤一:codec类插件插件帮助手册Logstash input插件步骤一:file模块插件filter grok插件Web日志实时分析部署beats与filebeat步骤一:filter grok模块插件logstash 一个数据采集、加工处…

基于巨控GRM561/562/563Y西门子1200PLC发邮件

巨控GRM560,GRM600系列同比之前的GRM530&#xff0c;除短信&#xff0c;微信&#xff0c;电话语音播报增加了邮件发送功能&#xff0c;简单介绍一下PLC发邮件。 1在博途中建立好DB块 2.打开GRMDEV6&#xff0c;新建工程&#xff0c;做好数据采集&#xff0c;这里以DB4.D0&#…

Day17:信息打点-APP资产知识产权应用监控静态提取动态抓包动态调试

目录 案例1&#xff1a;名称获取APP信息&#xff08;爱企查/小蓝本/七麦/点点&#xff09; 案例2&#xff1a;URL网站备案查APP 案例3&#xff1a;APP提取信息-静态分析 案例3&#xff1a;APP提取信息-动态抓包 案例4&#xff1a;APP提取信息-动态调试 思维导图 章节知识…

JavaWeb03-HTTP协议,Tomcat,Servlet

目录 一、HTTP协议 1.概述 2.特点 3.请求数据格式 &#xff08;1&#xff09;请求行 &#xff08;2&#xff09;请求头 &#xff08;3&#xff09;请求体 &#xff08;4&#xff09;常见请求头 &#xff08;5&#xff09;GET和POST请求区别 4.响应数据格式 &#xf…

Python一些可能用的到的函数系列125 FSM工具transitions

说明 首先FSM是一个很有用的工具&#xff0c;在程序设计中&#xff0c;某个对象会对应若干不同的状态&#xff0c;在这个状态下&#xff0c;同样的方法会有不一样的行为。 python有个transitions包可以做这个&#xff0c;过去一直不想用&#xff0c;主要是感觉有点鸡肋。 本质…

基于springboot+vue的个人博客系统

博主主页&#xff1a;猫头鹰源码 博主简介&#xff1a;Java领域优质创作者、CSDN博客专家、阿里云专家博主、公司架构师、全网粉丝5万、专注Java技术领域和毕业设计项目实战&#xff0c;欢迎高校老师\讲师\同行交流合作 ​主要内容&#xff1a;毕业设计(Javaweb项目|小程序|Pyt…

Vue自定义商品发布组件

文章目录 一、代码展示二、代码解读三、结果展示 一、代码展示 <template><div><a-popover trigger"hover" :getPopupContainer"triggerNode > {return triggerNode.parentNode || document.body;}"><template #content><d…

Redis面试总结

概述 1. Redis是什么&#xff1f;简述它的优缺点&#xff1f; Redis本质上是一个Key-Value类型的内存数据库&#xff0c;很像Memcached&#xff0c;整个数据库加载在内存当中操作&#xff0c;定期通过异步操作把数据库中的数据flush到硬盘上进行保存。 因为是纯内存操作&…