css3 中的2D转换
2024-09-02 01:48:02
一、CSS3转换
通过转换实现对对元素进行旋转、缩放、移动、拉伸的效果;这种原来必须要通过JS或者图片处理才可以实现的效果,现在都可以通过CSS3来完成。 2D转换采用transform属性来实现效果。
二、transform属性的取值
- rotate()函数 是可以进行旋转的函数
- scale()函数 可以进行缩放的函数
三、函数的用法
transform:rotate( deg);旋转
- 将transform属性的取值设置为rotate函数,在括号里的是旋转的角度,其单位是deg(degree程度),所需要设置角度的值可以是正值,也可以是负值。
- 正值按照顺时针进行旋转(向左);负值按照逆时针进行旋转(向右)
- 在我们编辑代码的时候可以使用 trsf 扩展 前缀也会随之被扩展出来(随机,输入trsf不一定出现的是transform:rotate()属性值)
实例一:
构建一个div盒子,实现鼠标悬停时盒子顺时针旋转30deg的效果。(如果我们将角度设置为负值,则会向左侧倾斜)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>2D转换</title>
<style>
body{
position: relative;
width: 400px;
height: 400px;
/*top: 100px;*/
/*left: 100px;*/
/*border:2px solid red;*/ }
div{
width: 100px;
height: 75px;
background-color: #939;
border:2px solid blue;
position: absolute;
}
#rotateDiv{
top:300px;
left:100px;
}
#rotateDiv:hover{
transform:rotate(30deg);
;}
</style>
</head>
<body>
<div id="rotateDiv">transform2</div>
</body>
</html>
表现效果:
transform:scale(x,y); 缩放
- 将transform属性的取值设置为scale函数时,则可以设置水平方向和垂直方向上的缩放比例。
- x:水平方向(横向的)缩放的倍数。y:垂直方向(高度)上的缩放的倍数,若省略,同x的取值(如transform:scale(1.3)表示水平和垂直都是1.3倍数)
- x和y的取值设置在(0~1)之间表示缩小,(>1)表示放大
实例二:
实现盒子鼠标悬停上时,盒子放大1.3倍的效果。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>2D转换</title>
<style>
body{
position: relative;
width: 400px;
height: 400px;
/*top: 100px;*/
/*left: 100px;*/
/*border:2px solid red;*/
}
div{
width: 100px;
height: 75px;
background-color: #939;
border:2px solid blue;
position: absolute;
}
#box1:hover{transform:scale(1.3)}
</style>
</head>
<body>
<div id="box1">transform1</div>
</body>
</html>
表现效果:
最新文章
- Medoo个人修改版
- js——倒计时
- edittext实现显示千分位格式
- 新的MOVE结构,和在项目中实际的感受
- linux系统 备份与还原
- IMPLEMENTED IN PYTHON +1 | CART生成树
- 获取布局 ActionBar
- windows程序消息机制(Winform界面更新有关)--转
- 通过class类来实例化其他类的对象(使用有参构造函数)
- QSqlDatabase::addDatabase第一次运行的时候,生成SQLite文件的同时会产生一个默认连接
- CentOS 7 源码编译安装 Mysql 5.7
- python数据分析工具包(2)——Numpy(二)
- ASP.NET CORE 自定义视图组件(ViewComponent)注意事项
- vim配置(使用Vundle)
- odoo 配置文件
- 编译Linux-4.15.1内核时遇到:“error : openssl/bio.h :No such file or folder”
- [HAOI 2015]按位或
- TensorFlow saved_model 模块
- JS函数入门
- ROS(机器视觉)