Unit Two: HTML&CSS(12)—CSS(08) 变形&旋转&缩放
1. 变形<transform:translateX() translateY() translateZ()>
-
变形就是指通过CSS来改变元素的形状位置。
- 变形不会影响页面布局。
-
XY轴平移
translateX()
沿着X轴平移。translateY()
沿着Y轴平移。translateZ()
沿着Z轴平移。
transform: translateX(100%); transform: translateY(200px); transform: translateX(50%) translateY(300px);
-
垂直水平居中
-
设置绝对定位位置居中:只适用于大小确定元素:
.box2{ width: 200px; height: 200px; background-color: tomato; position:absolute; top: 0px; bottom: 0px; left: 0px; right: 0px; margin: auto; }
-
设置绝对定位平移居中:元素被内容撑开:
.box3{ background-color: yellowgreen; position:absolute; /* 绝对定位,left为包含块的中间位置。 */ left: 50%; top: 50%; transform:translateX(-50%) translateY(-50%); }
-
-
元素浮出效果
.box4, .box5{ background-color: silver; width: 200px; height: 450px; margin: 200px 20px; float: left; transition: all 1s; } .box4:hover, .box5:hover{ transform: translateY(-10px); box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.5); }
-
Z轴平移
-
调整元素在Z轴的位置,正常情况下,调整元素和人眼之间的距离。
- 距离越大,元素里人越近。
-
z轴平移属于立体效果(近大远小),默认情况下网页不支持透视效果。因此必须给
html
设置视距<perspective:1000px>
html { /* 设置当前网页视距,也就是眼睛到屏幕的默认距离。 */ perspective: 1000px; } body:hover .box2{ transform: translateZ(200px); }
-
Chrome 和 Safari 支持替代的 -webkit-perspective 属性。
-
-
-
设置旋转中心位置
transform-origin
2. 旋转<transform:rotateX(45deg)/1 turn)>
通过旋转可以使元素沿着x,y或z轴旋转制定角度。
-
rotateX(a)函数功能等同于rotate3d(1,0,0,a) rotateY(a)函数功能等同于rotate3d(0,1,0,a) rotateZ(a)函数功能等同于rotate3d(0,0,1,a)
注:a指的是一个旋转角度值。turn是圈,1turn = 360deg;另外还有弧度rad,2πrad = 1turn = 360deg。如,transform:rotate(2turn)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/*必须给文件设置一个视距*/
html{
-webkit-perspective: 800px;
}
body div{
width: 300px;
height: 300px;
margin: 10px auto;
}
img{
width: 300px;
height: 300px;
transition: all 2s 2s;
}
body:hover .box1 img{
transform: rotateX(90deg);
}
body:hover .box2 img{
transform: rotateY(0.3turn);
}
body:hover .box3 img{
/* transform: translateZ(100px) rotateY(180deg); */
/* 沿Y轴旋转后,坐标体系变化,Z轴朝里,所以Z值平移增大,是往画面里平移,所以反而越来越小。 */
transform: rotateY(180deg) translateZ(100px) ;
/* transform: translateX(50%) rotateZ(90deg); */
/* rotate3d根据空间坐标系进行一定角度旋转。 */
/* transform:rotate3d(1, 0.5, -0.5, 45deg); */
/* transform: rotateZ(90deg); */
</style>
</head>
<body>
<div class="box1"><img src="./动画/1024px-Analogue_clock_face.svg.png" alt=""></div>
<div class="box2"><img src="./动画/bg2.png" alt=""></div>
<div class="box3"><img src="./动画/复仇者/1.jpg" alt=""></div>
</body>
</html>
-
设置元素背面可见度:
<backface-visibility:visiable/hidden>
3. 练习 钟表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.clock {
width: 500px;
height: 500px;
background-image: url(./动画/1024px-Analogue_clock_face.svg.png);
background-size: cover;
margin: 10px auto;
position: relative;
}
.clock>div {
position: absolute;
top: 0%;
bottom: 0%;
right: 0%;
left: 0px;
margin: auto;
}
.hour_wrapper {
width: 80%;
height: 80%;
/* background-color: aqua; */
/* 设置外容器旋转,让指针可以不围绕自身中心旋转。 */
animation: run 43200s linear infinite;
}
.hour {
height: 50%;
width: 6px;
background-color: black;
margin: 0 auto;
}
.min_wrapper {
width: 90%;
height: 90%;
/* background-color: aqua; */
/* 设置外容器旋转,让指针可以不围绕自身中心旋转。 */
animation: run 3600s linear infinite;
}
.min {
height: 50%;
width: 4px;
background-color: steelblue;
margin: 0 auto;
}
.sec_wrapper {
width: 95%;
height: 95%;
/* background-color: aqua; */
/* 设置外容器旋转,让指针可以不围绕自身中心旋转。 */
animation: run 60s steps(60) infinite;
}
.sec {
height: 50%;
width: 2px;
background-color: red;
margin: 0 auto;
}
@keyframes run {
from {
transform: rotateZ(0);
}
to {
transform: rotateZ(360deg);
}
}
</style>
</head>
<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>
4. 练习 2 立方体旋转
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
html{
perspective: 800px;
}
.cubic{
width: 200px;
height: 200px;
margin: 100px auto;
position: relative;
/* transform默认情况下是2D效果,需要3d效果需设置transform-style */
transform-style: preserve-3d;
animation: rotate 10s linear infinite;
}
.cubic div{
width: 200px;
height: 200px;
vertical-align: top;
position: absolute;
opacity: 0.8;
}
.box1{
transform: rotateY(90deg) translateZ(100px);
}
.box2{
transform: rotateY(-90deg) translateZ(100px);
}
.box3{
transform: rotateX(90deg) translateZ(100px);
}
.box4{
transform: rotateX(-90deg) translateZ(100px);
}
.box5{
transform: rotateX(-180deg) translateZ(100px);
}
.box6{
transform: rotateX(0deg) translateZ(100px);
}
@keyframes rotate {
from{
transform: rotate3d(0,0,0,0);
}
from{
transform: rotate3d(0.5,0.5,0.8,360deg);
}
}
</style>
</head>
<body>
<div class="cubic">
<div class="box1"><img src="./动画/复仇者/1.jpg" alt=""></div>
<div class="box2"><img src="./动画/复仇者/2.jpg" alt=""></div>
<div class="box3"><img src="./动画/复仇者/3.jpg" alt=""></div>
<div class="box4"><img src="./动画/复仇者/4.jpg" alt=""></div>
<div class="box5"><img src="./动画/复仇者/5.jpg" alt=""></div>
<div class="box6"><img src="./动画/复仇者/6.jpg" alt=""></div>
</div>
</body>
</html>
5. 缩放< transform: scale(n,n)>
- 水平方向缩放:
< transform: scaleX(n)>
- 垂直方向缩放:
< transform: scaleY(n)>
- 双方向缩放:
< transform: scale(n,n)>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
width: 200px;
height: 200px;
margin: 100px auto;
}
.box img {
transition: all 2s;
transform-origin: left top;
}
.box img:hover {
/* transform: scaleX(2); */
/* transform: scaleY(0.2); */
/* 下拉效果 */
transform: scale(0.2, 2);
}
</style>
</head>
<body>
<div class="box">
<img src="./动画/复仇者/1.jpg" alt="">
</div>
</body>
</html>
PREVIOUSLess(01)---简介