CSS3之transform属性-2D转换
程序员文章站
2024-01-24 16:02:52
...
transform:
作用：
该属性可以将元素旋转、缩放、移动、倾斜等
说明：
应用于元素的2D或3D转换
常用值：
(none)：定义不进行转换
(translate)：定义2d位移，向右、向下为正值；向左、向上为负值
(translateX)：定义关于x轴的位移
(translateY)：定义关于y轴的位移
(rotate)：定义2d旋转，顺时针为正值；逆时针为负值
(rotateX)：定义关于x轴的旋转
(rotateY)：定义关于y轴的旋转
(scale)：定义2d缩放，0 - 1缩小，1 - +∞放大
(scaleX)：定义关于x轴的缩放
(scaleY)：定义关于y轴的缩放
transform-origin:
作用：
改变元素转换的中心位置
说明：
2D转换元素可以改变元素的X和Y轴。 3D转换元素，还可以更改元素的Z轴，使用此属性必须先使用transform属性
常用值：
(x-axis)：定义关于x轴的旋转中心，left、center、right、length、百分比
(y-axis)：定义关于y轴的旋转中心，left、center、right、length、百分比
(z-axis)：定义关于z轴的旋转中心，left、center、right、length、百分比
注意：
注意后面的参数 x 和 y 用空格隔开
x y 默认旋转的中心点是元素的中心 (50% 50%)，等价于 center center
还可以给 x y 设置像素或者方位名词(top、bottom、left、right、center)
总结：
- 同时使用多个转换，其格式为
transform: translate() rotate() scale() - 顺序会影响到转换的效果(先旋转会改变坐标轴方向)
- 但我们同时有位置或者其他属性的时候，要将位移放到最前面
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>CSS3之2D转换属性</title>
<style type="text/css">
body {
height: 2000px;
}
div {
width: 300px;
height: 300px;
transition: all 1s;
}
.div1 {
background-color: #4fbfff;
}
.div1:hover {
/* 定义在x轴方向上的位移 */
/*transform: translateX(100px);*/
/* 定义在y轴方向上的位移 */
/*transform: translateY(100px);*/
/* 同时使用 */
/*transform: translateX(100px) translateY(100px);*/
/* 合并用法 百分比值以自身size为基数 */
transform: translate(50%, 50%);
}
.div2 {
background-color: lightpink;
}
.div2:hover {
/* 以元素中心点旋转 */
transform: rotate(45deg);
}
.div3 {
background-color: greenyellow;
}
.div3:hover {
/* 指定x轴方向上的缩放 */
/*transform: scaleX(1.5);*/
/* 指定y轴方向上的缩放 */
/*transform: scaleY(1.5);*/
/* 同时使用 */
/*transform: scaleX(1.5 ) scaleY(1.5);*/
/* 指定x，y轴方向上的缩放 */
/*transform: scale(2, 2);*/
/* 合并用法 */
transform: scale(1.5);
}
.div4 {
margin: 0 auto;
background-color: green;
}
.div4:hover {
/*transform: translate(50%, 50%);*/
/*transform: scale(2);*/
transform-origin: right top;
transform: rotate(-90deg);
}
.div5 {
background-color: #1075ff;
}
.div5:hover {
/* 综合写法：位移属性放在最前面 */
transform: translate(400px, 400px) scale(.5) rotate(180deg);
}
</style>
</head>
<body>
<div class="div1"></div>
<hr>
<div class="div2"></div>
<hr>
<div class="div3"></div>
<hr>
<div class="div4"></div>
<hr>
<div class="div5"></div>
</body>
</html>
案例1：分页按钮
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8"/>
<title>CSS3之2D/3D转换案例：分页按钮</title>
<style type="text/css">
.page li {
float: left;
margin-right: 30px;
list-style: none;
}
.page li a {
display: block;
width: 40px;
height: 40px;
border: 2px solid limegreen;
border-radius: 20px;
color: #999;
line-height: 40px;
text-align: center;
text-decoration: none;
transition: all .2s;
}
.page li a:hover {
color: #666;
transform: scale(1.2);
}
.page li:first-child a,
.page li:last-child a {
width: 70px;
border-radius: 35px/20px;
}
</style>
</head>
<body>
<div class="page">
<ul>
<li><a href="">上一页</a></li>
<li><a href="">1</a></li>
<li><a href="">2</a></li>
<li><a href="">3</a></li>
<li><a href="">4</a></li>
<li><a href="">5</a></li>
<li><a href="">6</a></li>
<li><a href="">...</a></li>
<li><a href="">下一页</a></li>
</ul>
</div>
</body>
</html>
案例2：下拉菜单
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8"/>
<title>CSS3之2D/3D转换案例：下拉菜单</title>
<link rel="stylesheet" href="css/style.css" type="text/css"/>
<style type="text/css">
@font-face{
font-family:'icomoon';
src:url('fonts/icomoon.eot');
src:url('fonts/icomoon.eot?#iefix') format('embedded-opentype'),
url('fonts/icomoon.woff') format('woff'),
url('fonts/icomoon.ttf') format('truetype'),
url('fonts/icomoon.svg#SofiaProLight') format('svg');
font-weight:normal;
font-style:normal;
}
.side-menu li {
list-style: none;
}
.side-menu li a {
display: inline-block;
position: relative;
width: 180px;
height: 38px;
background-color: #444;
color: white;
line-height: 38px;
text-align: center;
text-decoration: none;
}
.side-menu li a i {
position: absolute;
top: 8px;
right: 10px;
font-style: normal;
font-size: 20px;
vertical-align: middle;
transition: .4s;
}
.side-menu li a:hover {
background-color: #1075ff;
box-shadow: skyblue 0 0 20px 0 inset;
}
.side-menu li a:active {
box-shadow: #0000ff 0 0 10px 0 inset;
}
.side-menu li a:hover .icon-circle-right {
transform: rotate(90deg);
}
.side-menu ul li:first-child a {
border-radius: 4px 4px 0 0;
}
.side-menu ul li:last-child a {
border-radius: 0 0 4px 4px;
}
</style>
</head>
<body>
<div class="side-menu">
<ul>
<li><a href="#">链接1<i class="icon-circle-right"></i></a></li>
<li><a href="#">链接2<i class="icon-circle-right"></i></a></li>
<li><a href="#">链接3<i class="icon-circle-right"></i></a></li>
<li><a href="#">链接4<i class="icon-circle-right"></i></a></li>
<li><a href="#">链接5<i class="icon-circle-right"></i></a></li>
<li><a href="#">链接6<i class="icon-circle-right"></i></a></li>
</ul>
</div>
</body>
</html>
案例3：旋转中心
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8"/>
<title>CSS3之2D/3D转换案例：旋转中心</title>
<style type="text/css">
.container {
overflow: hidden;
width: 400px;
height: 400px;
margin: 100px auto;
border: 1px solid skyblue;
border-radius: 20px;
}
.container::before {
content: "Hello World!";
display: block;
width: 400px;
height: 400px;
border-radius: 20px;
background-color: skyblue;
color: white;
font-size: 30px;
line-height: 400px;
text-align: center;
transition: .3s;
transform: rotate(90deg) scale(0.2);
transform-origin: left bottom;
}
.container:hover::before {
transform: rotate(0deg) scale(1);
}
</style>
</head>
<body>
<div>
<div class="container"></div>
</div>
</body>
</html>
上一篇： mysql数据到导入导出_MySQL
下一篇： C语言实现bmp图像锐化
推荐阅读
-
CSS3之transform属性-2D转换
-
CSS3:2D转换
-
css3 transform(2D)的使用
-
CSS3如何实现2D转换和3D转换，他们有何区别_html/css_WEB-ITnose
-
CSS3之2D与3D变换的实现方法
-
CSS3与动画有关的属性transition、animation、transform对比（史上最全版）
-
CSS3之2D与3D变换的实现方法
-
CSS3转换功能transform主要属性值分析及实现分享
-
CSS3中的transform属性进行2D和3D变换的基本用法
-
CSS3新属性transition-property transform box-shadow实例学习