2D-定位,旋转,缩放
2D-定位,旋转,缩放
1. 移动盒子的位置,定位
-
-
<html lang="en">
-
-
<head>
-
<meta charset="UTF-8">
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
-
<meta http-equiv="X-UA-Compatible" content="ie=edge">
-
<title>Document</title>
-
<style>
-
/* 移动盒子的位置: 定位 盒子的外边距 2d转换移动 */
-
-
div {
-
width: 200px;
-
height: 200px;
-
background-color: pink;
-
/* x就是x轴上移动位置 y 就是y轴上移动位置 中间用逗号分隔*/
-
/* transform: translate(x, y); */
-
/* transform: translate(100px, 100px); */
-
/* 1. 我们如果只移动x坐标 */
-
/* transform: translate(100px, 0); */
-
/* transform: translateX(100px); */
-
/* 2. 我们如果只移动y坐标 */
-
/* transform: translate(0, 100px); */
-
/* transform: translateY(100px); */
-
}
-
-
div:first-child {
-
transform: translate(30px, 30px);
-
}
-
-
div:nth-child(2) {
-
background-color: purple;
-
}
-
div:nth-child(3) {
-
transform: translate(100px, 200px);
-
background-color: blue;
-
}
-
</style>
-
</head>
-
-
<body>
-
<div></div>
-
<div></div>
-
<div></div>
-
</body>
-
-
</html>
测试结果如下:
2、 让盒子水平居中和垂直居中的方法二
-
-
<html lang="en">
-
-
<head>
-
<meta charset="UTF-8">
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
-
<meta http-equiv="X-UA-Compatible" content="ie=edge">
-
<title>Document</title>
-
<style>
-
div {
-
/* 父盒子是相对的 */
-
position: relative;
-
width: 500px;
-
height: 500px;
-
background-color: pink;
-
/* 1. 我们tranlate里面的参数是可以用 % */
-
/* 2. 如果里面的参数是 % 移动的距离是 盒子自身的宽度或者高度来对比的 */
-
/* 这里的 50% 就是 50px 因为盒子的宽度是 100px */
-
transform: translateX(50%);
-
}
-
-
p {
-
/* 儿子相对父亲是绝对的,这就是子绝父相*/
-
position: absolute;
-
top: 50%;
-
left: 50%;
-
width: 200px;
-
height: 200px;
-
background-color: purple;
-
/* margin-top: -100px;
-
margin-left: -100px; */
-
/* translate(-50%, -50%) 盒子往上走自己高度的一半 */
-
transform: translate(-50%, -50%);
-
}
-
-
span {
-
/* translate 对于行内元素是无效的 */
-
transform: translate(300px, 300px);
-
}
-
</style>
-
</head>
-
-
<body>
-
<div>
-
<p></p>
-
</div>
-
<span>123</span>
-
</body>
-
-
</html>
测试结果如下:
3.2D转换之 rotate
-
-
<html lang="en">
-
-
<head>
-
<meta charset="UTF-8">
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
-
<meta http-equiv="X-UA-Compatible" content="ie=edge">
-
<title>Document</title>
-
<style>
-
img {
-
width: 400px;
-
/* 顺时针旋转45度 */
-
/* transform: rotate(45deg); */
-
border-radius: 50%;
-
border: 5px solid pink;
-
/* 过渡写到本身上,谁做动画给谁加 */
-
transition: all 0.3s;
-
}
-
-
img:hover {
-
transform: rotate(360deg);
-
}
-
</style>
-
</head>
-
-
<body>
-
<img src="media/pic.jpg" alt="">
-
</body>
-
-
</html>
4. css3 用代码的方式搞一个三角形
-
-
<html lang="en">
-
-
<head>
-
<meta charset="UTF-8">
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
-
<meta http-equiv="X-UA-Compatible" content="ie=edge">
-
<title>Document</title>
-
<style>
-
div {
-
/* 设置框子高度和宽度,边的宽度以及颜色 */
-
position: relative;
-
width: 249px;
-
height: 35px;
-
border: 1px solid #000;
-
}
-
-
/* 设置在div的后面 放置 > 的位置和角度 */
-
div::after {
-
content: "";
-
position: absolute;
-
top: 8px;
-
right: 15px;
-
width: 10px;
-
height: 10px;
-
border-right: 1px solid #000;
-
border-bottom: 1px solid #000;
-
/* 将正方形的右边和下边正方向旋转45deg */
-
transform: rotate(45deg);
-
transition: all 0.2s;
-
}
-
/* 鼠标经过div 里面的三角旋转 */
-
-
div:hover::after {
-
/* 当鼠标进过这里的时候,旋转 */
-
transform: rotate(225deg);
-
}
-
</style>
-
</head>
-
-
<body>
-
<div></div>
-
</body>
-
-
</html>
测试结果如下:
5. 设置元素旋转的中心点
-
-
<html lang="en">
-
-
<head>
-
<meta charset="UTF-8">
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
-
<meta http-equiv="X-UA-Compatible" content="ie=edge">
-
<title>Document</title>
-
<style>
-
div {
-
width: 200px;
-
height: 200px;
-
background-color: pink;
-
margin: 100px auto;
-
transition: all 1s;
-
/* 1.可以跟方位名词 */
-
/* transform-origin: left bottom; */
-
/* 2. 默认的是 50% 50% 等价于 center center */
-
/* 3. 可以是px 像素 */
-
-
/* 通过 transform-origin 参数可以设置旋转的中心点 这里设置的是正方形的中心; */
-
transform-origin: 50% 50%;
-
/* transform-origin: 50px 50px; */
-
}
-
-
div:hover {
-
transform: rotate(360deg);
-
}
-
</style>
-
</head>
-
-
<body>
-
<div></div>
-
</body>
-
-
</html>
-
-
<html lang="en">
-
-
<head>
-
<meta charset="UTF-8">
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
-
<meta http-equiv="X-UA-Compatible" content="ie=edge">
-
<title>Document</title>
-
<style>
-
div {
-
/* 超出该盒子的部分进行隐藏 */
-
overflow: hidden;
-
width: 200px;
-
height: 200px;
-
border: 1px solid pink;
-
margin: 10px;
-
float: left;
-
}
-
-
div::before {
-
content: "黑马";
-
display: block;
-
width: 100%;
-
height: 100%;
-
background-color: hotpink;
-
/* 开始就旋转 180deg ,然后再当鼠标经过的时候,变成原貌即可 */
-
transform: rotate(180deg);
-
/* 按照左下角作为中心点进行旋转 */
-
transform-origin: left bottom;
-
transition: all 0.4s;
-
}
-
/* 鼠标经过div 里面的before 复原 */
-
-
div:hover::before {
-
transform: rotate(0deg);
-
}
-
</style>
-
</head>
-
-
<body>
-
<div></div>
-
<div></div>
-
<div></div>
-
</body>
-
-
</html>
测试结果如下:
6. 2D转换之缩放,图片,按钮缩放案例
-
缩放
-
-
<html lang="en">
-
-
<head>
-
<meta charset="UTF-8">
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
-
<meta http-equiv="X-UA-Compatible" content="ie=edge">
-
<title>Document</title>
-
<style>
-
div {
-
width: 200px;
-
height: 200px;
-
background-color: pink;
-
margin: 100px auto;
-
/* 设置盒子的缩放是按照哪个中心点进行缩放的,如果没有设置的话默认是以中心点 */
-
/* transform-origin: left bottom; */
-
}
-
-
div:hover {
-
/* 1. 里面写的数字不跟单位 就是倍数的意思 1 就是1倍 2就是 2倍 */
-
/* transform: scale(x, y); */
-
/* transform: scale(2, 2); */
-
/* 2. 修改了宽度为原来的2倍 高度 不变 */
-
/* transform: scale(2, 1); */
-
/* 3. 等比例缩放 同时修改宽度和高度,我们有简单的写法 以下是 宽度修改了2倍,高度默认和第一个参数一样*/
-
/* transform: scale(2); */
-
/* 4. 我们可以进行缩小 小于1 就是缩放 */
-
/* transform: scale(0.5, 0.5); */
-
/* transform: scale(0.5); */
-
/* 5. scale 的优势之处: 不会影响其他的盒子 而且可以设置缩放的中心点*/
-
/* width: 300px;
-
height: 300px; */
-
transform: scale(2);
-
}
-
-
.test {
-
height: 200px;
-
width: 200px;
-
background-color: aqua;
-
transform-origin: left top;
-
}
-
-
.test:hover {
-
transform: scale(0.5);
-
}
-
</style>
-
-
</head>
-
-
<body>
-
<div></div>
-
<p class="test"></p>
-
123123
-
</body>
-
-
</html>
-
-
图片放大案例
-
-
<html lang="en">
-
-
<head>
-
<meta charset="UTF-8">
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
-
<meta http-equiv="X-UA-Compatible" content="ie=edge">
-
<title>Document</title>
-
<style>
-
div {
-
overflow: hidden;
-
float: left;
-
margin: 10px;
-
}
-
-
div img {
-
transition: all .4s;
-
}
-
-
div img:hover {
-
transform: scale(1.1);
-
}
-
</style>
-
</head>
-
-
<body>
-
<div>
-
<a href="#"><img src="media/scale.jpg" alt=""></a>
-
</div>
-
<div>
-
<a href="#"><img src="media/scale.jpg" alt=""></a>
-
</div>
-
<div>
-
<a href="#"><img src="media/scale.jpg" alt=""></a>
-
</div>
-
</body>
-
-
</html>
结果如下:
-
-
分页按钮放大
-
-
<html lang="en">
-
-
<head>
-
<meta charset="UTF-8">
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
-
<meta http-equiv="X-UA-Compatible" content="ie=edge">
-
<title>Document</title>
-
<style>
-
li {
-
float: left;
-
width: 30px;
-
height: 30px;
-
border: 1px solid pink;
-
margin: 10px;
-
text-align: center;
-
line-height: 30px;
-
list-style: none;
-
border-radius: 50%;
-
cursor: pointer;
-
transition: all .4s;
-
}
-
-
li:hover {
-
transform: scale(1.2);
-
}
-
</style>
-
</head>
-
-
<body>
-
<ul>
-
<li>1</li>
-
<li>2</li>
-
<li>3</li>
-
<li>4</li>
-
<li>5</li>
-
<li>6</li>
-
<li>7</li>
-
</ul>
-
</body>
-
-
</html>
-
8. 2D转换之综合写法
-
-
<html lang="en">
-
-
<head>
-
<meta charset="UTF-8">
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
-
<meta http-equiv="X-UA-Compatible" content="ie=edge">
-
<title>Document</title>
-
<style>
-
div {
-
width: 200px;
-
height: 200px;
-
background-color: pink;
-
transition: all .5s;
-
}
-
-
div:hover {
-
/* transform: rotate(180deg) translate(150px, 50px); */
-
/* 我们同时有位移和其他属性,我们需要把位移放到最前面 */
-
transform: translate(150px, 50px) rotate(180deg) scale(1.2);
-
}
-
</style>
-
</head>
-
-
<body>
-
<div></div>
-
</body>
-
-
</html>
结果如下:
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanhgffcck
系列文章
更多
同类精品
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
怎样阻止微信小程序自动打开
PHP中文网 06-13 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01