H5_Day3
一、transform变换
概述：在HTML5中，可以实现元素的2D、3D变换
主要可以实现：缩放比例【scale】、平移【translate】、旋转【rotate】
1.1、2D变换动画
如果写了多个transform样式，则后面写的transform覆盖前面的，即只有最后一个起作用。
1.1.1缩放【scale】
<style>
*{
margin: 0;
padding: 0;
}
div{
width: 200px;
height: 200px;
margin:100px auto;
background:url(../images/3.png) no-repeat;
border:2px dashed black;
/* transform的缩放属性————scale() */
/* 里面放一个数字时表示元素的宽高按比例缩放N倍。负值就让图片倒过来 */
transform:scale(1.5);
}
</style>
/* 里面放两个参数：第一个参数表示宽是原来的多少倍，第二个参数表示高是原来的多少倍 */
transform:scale(2,1);
1.1.2、旋转【rotate】
/* transform的旋转属性————rotate,参数的值为x deg，deg是角度的缩写 */
transform: rotate(30deg);
图片绕着它的几何中心进行旋转。
1.1.3、平移【translate】
/* transform的平移属性————translate() */
/* 第一个参数表示水平平移，正数为右负数为左；第二个参数表示竖直平移，正数为向下，负数为向上 */
transform:translate(20px,20px);
1.2、3D变换动画
1.2.1、3D旋转
通过rotateX,rotateY,rorateZ，来实现，旋转的单位同样是deg
如果相比较明显的看到3D旋转效果，需要父子盒子嵌套使用。而且父盒子需要加上景深效果，即perspective：npx；代表人眼距离这个盒子的距离（一般设置的较大）
<style>
*{
margin: 0;
padding: 0;
}
.box{
width: 200px;
height: 200px;
border:1px solid black;
/* 景深效果 */
perspective: 10000px;
margin:100px auto;
}
.cur{
width: 200px;
height: 200px;
background: url(../images/1.jpg);
/* 加上3D旋转样式 */
transform: rotateX(0deg);
}
</style>
1.2.2、3D平移
通过translateX，translateY，translateZ来实现，属性值为npx。
同样的，需要父子盒子嵌套才能看的清除，同时父盒子需要加上景深样式，perspective。
<style>
*{
margin: 0;
padding: 0;
}
.box{
width: 200px;
height: 200px;
border:1px solid black;
/* 景深效果 */
perspective: 10000px;
margin:100px auto;
}
.cur{
width: 200px;
height: 200px;
background: url(../images/1.jpg);
/* 加上3D平移样式 */
transform: translateX(0px);
}
</style>
translateX：值为正数则向右平移，值为负数则向左平移。
translateY：值为正数则向下平移，值为负数则向上平移。
translateZ：值为正数则离屏幕越来越近，值为负数则离屏幕越来越远。
注：transform是一个综合属性，可以同时实现平移、旋转和缩放，不同的样式之间空格隔开即可。
<style>
*{
margin: 0;
padding: 0;
}
.box{
width: 200px;
height: 200px;
border:1px solid black;
/* 景深效果 */
perspective: 10000px;
margin:100px auto;
}
.cur{
width: 200px;
height: 200px;
background: url(../images/1.jpg);
transform:rotateX(0deg) translateY(0px);
}
</style>
当我们的元素进行3D旋转时，整体的三维坐标体系的方向会发生改变，跟谁先谁后没有关系。
比如当rotateY（87deg）时再translateZ（10px）此时的z轴平移跟刚开始不一样。即z轴的方向发生了改变。
1.3、小练习
模板字符串：当带有变量的字符串连接时比较麻烦，可用模板字符串来直接连接，省去很多连字符让代码看起来简洁。
`${变量}`
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.box{
width: 400px;
height: 400px;
margin:100px auto;
border:1px solid black;
}
.cur{
width: 400px;
height: 200px;
background: red;
}
p{
margin-top:10px
}
</style>
</head>
<body>
<div class="box">
<div class="cur"></div>
<p>
RX:<input type="range" min="0" max = "360" value = "0" name = "rx"><span>0</span>
</p>
<p>
RY:<input type="range" min="0" max = "360" value = "0" name = "ry"><span>0</span>
</p>
<p>
RZ:<input type="range" min="0" max = "360" value = "0" name = "rz"><span>0</span>
</p>
<p>
TX:<input type="range" min="0" max = "360" value = "0" name = "tx"><span>0</span>
</p>
<p>
TY:<input type="range" min="0" max = "360" value = "0" name = "ty"><span>0</span>
</p>
<p>
TZ:<input type="range" min="0" max = "360" value = "0" name = "tz"><span>0</span>
</p>
</div>
</body>
</html>
<script>
//获取到所有的input节点
var ranges = document.querySelectorAll("input");
//获取所有的span标签
var spans = document.querySelectorAll("span");
//获取cur标签
var cur = document.querySelector(".cur");
var rx = "rotateX(0deg)",ry = "rotateY(0deg)",rz = "rotateZ(0deg)";
var tx = "translateX(0px)",ty = "translateY(0px)",tz = "translateZ(0px)";
//批量添加事件
for(var i = 0 ; i < ranges.length ; i++)
{
//用六个IIFE，每个IIFE有自己独立的作用域。
+function(index){
ranges[index].oninput = function(){
//改变span标签的文本
spans[index].innerHTML = this.value;
//改变transform里面的值
switch(this.name){
case "rx":
rx = `rotateX(${this.value}deg)`;
break;
case "ry":
ry = `rotateY(${this.value}deg)`;
break;
case "rz":
rz = `rotateZ(${this.value}deg)`;
break;
case "tx":
tx = `translateX(${this.value}px)`;
break;
case "ty":
ty = `translateY(${this.value}px)`;
break;
case "tz":
tz = `translateZ(${this.value}px)`;
break;
}
cur.style.transform = rx+" "+ry+" "+rz+" "+tx+" "+ty+" "+tz;
}
}(i);
}
</script>
二、animation动画
作用：给元素添加一些动画，需要注意的是，当前这个样式是一个综合样式。
基本语法格式：
animation:动画名称 动画总时间 动画速率 动画延迟时间 动画执行次数 动画是否反向执行 动画执行完后是否返回原点。
animation-name:动画名字，名字必须符合命名标识符规范
animation-duration:总时间【s/ms】
animation-timing-function:速率 linear（匀速）
animation-delay:第一次动画延迟时间，这个属性值可以为负数，代表提前。
animation-iteration-count:动画执行次数【数字或者infinite】
animation-direction:动画是否反向执行，属性值为alternate代表反向执行【注意，反向执行也是占动画执行次数的】
animation-fill-mode:动画执行完后是否返回原点。默认返回原点，如果值为forwards则代表不返回原点。
animation分为声明和调用两部分。
animation-play-state:监测动画的执行状态，默认值为running表示动画在执行，若添加属性值为paused，则动画暂停。
3.3、正方体
1.如果在一个实例中，某个标签既是舞台又是舞者，则要给他加上transform-style:preserve-3d；
2.transform是一个综合属性，不能够分开写否则后面的会覆盖前面的，只能写在同一条语句中；
3.涉及到3D动画的需要给父盒子加上景深效果；
4.注意子盒子li在经过rotateX等旋转变换后，它们的各自的坐标系其实已经发生了变化，在进行平移操作时要根据变化后的坐标系来设置相应的XYZ值。
<style>
*{
margin: 0;
padding: 0;
}
.box{
width: 200px;
height: 200px;
margin:100px auto;
/* 景深效果 */
perspective: 3000px;
}
ul{
width: 200px;
height: 200px;
list-style:none;
/* 当一个盒子既是舞台又是舞者时，需要给他加上transform-style:preserve-3d; */
transform-style:preserve-3d;
position: relative;
/* 动画的调用 */
animation:donghua 2s linear 0s infinite forwards;
}
li{
width: 200px;
height: 200px;
position: absolute;
opacity:.5;
}
li:nth-child(1){
transform:translateZ(100px);
background: orange;
}
li:nth-child(2){
transform: translateZ(-100px);
background: cyan;
}
li:nth-child(3){
transform:rotateX(90deg) translateZ(100px);
background: yellow;
}
li:nth-child(4){
transform:rotateX(90deg) translateZ(-100px);
background: blue;
}
li:nth-child(5){
transform: rotateY(90deg) translateZ(100px);
background: green;
}
li:nth-child(6){
transform: rotateY(90deg) translateZ(-100px);
background: pink;
}
/* 动画的声明 */
@-webkit-keyframes donghua{
from{
transform: rotateX(0deg) rotateY(0deg);
}
to{
transform: rotateX(360deg) rotateY(360deg);
}
}
ul:hover{
animation-play-state:paused;
}
</style>
浙公网安备 33010602011771号