45、变形
- 作者: 我生命中的温暖唯有你的微笑
- 来源: 51数据库
- 2021-09-21
文章目录
- 介绍
- 变形
- z轴平移
- 旋转
- 钟表练习
- 立体图片容器
- 缩放
介绍
本文是在学习CSS时做的学习笔记，所有笔记内容为 CSS学习笔记
变形
<html lang="en">
<head>
<meta charset="UTF-8">
<title>meta</title>
</head>
<style>
.box1{
width:200px;
height:200px;
background-color:#bfa;
margin:0 auto;
margin-top:100px;
1、变形就是通过css来改变元素的形状或位置
- 变形不会影响到页面的布局
- transform 用来设置元素变形的效果(一个元素只会有一个transform生效，后面的覆盖前面的)
- 平移：
translateX() 沿着x轴方向平移
translateY() 沿着y轴平移
translateZ() 沿着z轴平移
- 平移元素时，百分比是相对于自身计算的
transform:translateX(100px)
}
.box2{
width:200px;
height:200px;
background-color:#oragne;
margin:0 auto;
}
// 如下，使用变形进行元素居中
.box3{
background-color:orange
position:absolute;
/*
这种居中方式，只适用于元素的大小确定
top:0;
left:0;
bottom:0;
right:0;
margin:auto;
*/
/* 如下设置水平、垂直居中 */
left:50%;
top：50%；
transform:translateX(-50%) translateY(-50%);
}
// 如下，为设置鼠标移入，上浮效果
.box4,.box5{
width:220px;
height:300px;
background-color:yellowgreen;
float：left;
margin:0 10px;
transition:transform 0.3s;
}
.box4:hover{
transform:translateY(-4px);
box-shadow:0 0 10px rgba(0,0,0,0.3);
}
</style>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
<div class="box5"></div>
</body>
</html>
z轴平移
<html lang="en">
<head>
<meta charset="UTF-8">
<title>meta</title>
</head>
<style>
html{
1、设置当前网页的视距为800px 人眼距离网页的距离，z轴平移效果必须设置perspective才能看出
perspective:800px;
}
.box1{
width:200px;
height:200px;
background-color:#bfa;
margin:200px auto;
2、z轴平移，调整元素在z轴的位置，元素和人眼之间的距离
距离越大，元素离人越接近
z轴的平移属于立体的效果（近大远小）默认情况下不支持透视
如果需要看见效果，必须设置网页的视距
transition:2s；
}
body:hover .box1{
transform:translateZ(100px)
}
</style>
<body>
<div class="box1"></div>
</body>
</html>
旋转
<html lang="en">
<head>
<meta charset="UTF-8">
<title>meta</title>
</head>
<style>
html{
/* 设置当前网页的视距为800px 人眼距离网页的距离*/
perspective:800px;
}
.box1{
width:200px;
height:200px;
background-color:#bfa;
margin:200px auto;
transition:2s；
}
body:hover .box1{
transform:translateZ(100px)
1、通过旋转，可以使元素沿着x y 或者 z 旋转指定的角度
rotateZ()
- 度数 turn
rotateX()
rotateY()
transform:rotateZ(45deg);
transform:rotateX(90deg)；
transform :rotateY(180deg) translateZ(400PX);
2、设置是否显示元素背面
visible 显示
hidden 隐藏
backface-visibility:visible
}
</style>
<body>
<div class="box1"></div>
</body>
</html>
钟表练习
<html lang="en">
<head>
<meta charset="UTF-8">
<title>meta</title>
</head>
<style>
*{
margin:0;
padding:0
}
.sec-wrapper{
width:500px;
height:500px;
animation:run 60s;
}
.sec{
height:300px;
width:4px;
color:red;
margin:0 auto;
}
@keyframs run{
from{
transform:rotateZ(0);
}
to{
transform:rotateZ(360deg);
}
}
</style>
<body>
<div class="sec-wrapper">
<div class="sec"></div>
</div>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>meta</title>
</head>
<style>
*{
margin:0;
padding:0
}
// 设置表的样式
.clock{
width:500px;
height:500px;
margin:0 auto;
margin-top:100px;
border-radius:50%;
border:1px solid black
//animation:run 60s;
position:relative;
}
.clock > div{
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
margin:auto
}
/* 设置时针 */
.hour-wrapper{
height:60%;
width:60%;
animation:run 7200s linear infinite;
}
.hour{
height:50%;
width:6px;
background-color:#0000;
margin:0 auto;
}
.min-wrapper{
hegiht:80%;
width:80%;
animation:run 600s steps(60) infinite;
}
.min{
height:50%;
width:6px;
background-color:#0000;
margin:0 auto;
animation:run 60s steps(60) infinite;
}
.sec-wrapper{
hegiht:95%;
width:95%;
animation:run 60s steps(60);
}
.sec{
height:50%;
width:2px;
background-color:#0000;
margin:0 auto;
}
/*旋转容器*/
@keyframs run{
from{
transform:rotateZ(0);
}
to{
transform:rotateZ(360deg);
}
}
</style>
<body>
<div class="clock">
/* 创建时针*/
<div class="hour-wrapper">
<div class="hour"></div>
</div>
/* 创建分针*/
<div class="min-wrapper">
<div class="min"></div>
</div>
/* 创建秒针*/
<div class="sec-wrapper">
<div class="sec"></div>
</div>
</div>
</body>
</html>
立体图片容器
<html lang="en">
<head>
<meta charset="UTF-8">
<title>meta</title>
</head>
<style>
*{
margin:0;
padding:0
}
html{
perspective:800px;
}
// 设置表的样式
.cube{
width:200px;
height:200px;
margin:100px auto;
/*设置3d变形的效果*/
transform-style:preserve-3d
transform:rotateX(45deg) rotateZ(45deg);
animation:rotate 20s;
}
.cube>div{
width:200px;
height:200px;
/* 为元素设置透明效果 */
opacity:0.5;
position:absolute
}
img{
vertical-align:top;
}
.box1{
transform:rotateY(90deg) translateZ(100px);
}
.box2{
transform:rotataY(-90deg) translate(100px);
}
.box3{
transform:rotateX(90deg) translateZ(100px);
}
.box4{
transform:rotateX(-90deg) translateZ(100px)
}
.box5{
transform:translateZ(100px);
}
.box6{
transform:rotateY(180deg) translateZ(100px);
}
@keyframes rotate{
from{
transform:rotateX(0) rotateZ(0)
}
to{
transform:rotateX(0) rotateZ(0)
}
}
</style>
<body>
<div class="cube">
// 引入图片
<div class="box1">
<img src="./img/14/1.jpg">
</div>
<div class="box2">
<img src="./img/14/1.jpg">
</div>
<div class="box3">
<img src="./img/14/1.jpg">
</div>
<div class="box4">
<img src="./img/14/1.jpg">
</div>
<div class="box5">
<img src="./img/14/1.jpg">
</div>
<div class="box6">
<img src="./img/14/1.jpg">
</div>
</div>
</body>
</html>
缩放
<html lang="en">
<head>
<meta charset="UTF-8">
<title>meta</title>
</head>
<style>
。box1{
width:100px;
height:100px;
background-color:#bfa;
transition:2s;
}
.box1:hover{
1、对元素进行缩放的函数
scaleX() 水平方向的缩放
scaleY() 垂直方向的缩放
scale() 双方向的缩放
2、变形的原点：
默认值 center
transform-origin: 0 0
transform:scale(2)
}
// 如下，设置图片放大
.img-wrapper{
width:200px;
height:200px;
border:1px red solid;
overflow:hidden
}
img{
transition:0.2s
}
img-wrapper:hover img{
transform:scale(1.2)
}
</style>
<body>
<div class="box1"></div>
<div class="img-wrapper">
<img src=""/>
</div>
</body>
</html>
推荐阅读
