【前端攻略--HTML/CSS】这是你需要的transform学习教程
【前端攻略--HTML/CSS】这是你需要的transform学习教程
野原测试开发
发布于 2019-07-10 17:56:47
发布于 2019-07-10 17:56:47
文章被收录于专栏：技术探究
transform位移形变
- 移动
- 效果图：
- 具体代码如下：
- <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> .main{ /*透视点离屏幕的距离是1000像素（眼睛离屏幕的距离是1000像素）*/ transform-style: preserve-3d; perspective: 1000px; } .div1{ width: 300px; height: 300px; background: mediumpurple; margin: 0 auto; /*2D移动,translate(x,y),x代表水平的偏移距离，y代表垂直的偏移距离*/ /*transform:translate(0,300px);*/ /*3D移动,translate3d(x,y,z)*/ /*3D移动，x代表水平轴，y代表垂直抽，z代表从屏幕指向眼睛z轴*/ transform: translate3d(0,0px,-500px); } .div2{ width: 300px; height: 300px; background: skyblue; margin: 0 auto; /*2D移动,translate(x,y),x代表水平的偏移距离，y代表垂直的偏移距离*/ /*transform:translate(0,300px);*/ /*3D移动，x代表水平轴，y代表垂直抽，z代表从屏幕指向眼睛z轴*/ transform: translate3d(0,0px,0); } </style> </head> <body> <!-- transform:移动、旋转、倾斜、缩放 --> <div class="main"> <div class="div1"></div> <div class="div2"></div> </div> </body> </html>
- 旋转
- 效果图如下：
- 具体代码如下：
- <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .div1{ width: 300px; height: 300px; margin: 0 auto; background: deepskyblue; transition: all 3s; /*transform旋转 2d旋转：rotate(角度),顺时针是正值，逆时针是负值 transform: rotate3d(x,y,z);x,y,z形成一个向量，以这个向量为轴进行旋转 transform: rotateX() rotateY() rotateZ();按照x,y,z轴进行旋转 * * */ /*transform: rotate(-100deg);*/ /*transform: rotateY(45deg);*/ /*transform: rotate3d(10,10,10,45deg);*/ /*旋转的原点：center center*/ /*center left right bottom top*/ /*transform-origin: center center;*/ /*transform-origin: left top;*/ transform-origin: center bottom; } .div1:hover{ transform: rotate(45deg); } </style> </head> <body> <div class="main"> <div class="div1"> </div> </div> </body> </html>
- 缩放
- 效果图如下：
- 具体代码如下：
- <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .div1{ width: 300px; height: 300px; background: skyblue; margin: 0 auto; line-height: 300px; text-align: center; /*缩放*/ /*scale（2）放大的倍数*/ transform: scale(0.5); } .div2{ width: 300px; height: 300px; background: skyblue; margin: 100px auto; line-height: 300px; text-align: center; } </style> </head> <body> <div class="main"> <div class="div1"> helloworld </div> <div class="div2"> helloworld </div> </div> </body> </html>
- 倾斜
- 效果图如下：
- 具体代码如下：
- <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .div1{ width: 300px; height: 100px; background: skyblue; margin: 0 auto; line-height: 100px; text-align: center; font-size: 30px; /*倾斜*/ /*skew(x轴拉伸角度，y轴拉伸角度)*/ transform: skew(45deg,0); } .div1 span{ width: 300px; height: 100px; display: block; transform: skew(-45deg,0); } .div1:hover{ background: mediumpurple; } </style> </head> <body> <div class="main"> <div class="div1"> <span>helloworld</span> </div> </div> </body> </html>
总结：
- 移动：
- 2D移动,translate(x,y),x代表水平的偏移距离，y代表垂直的偏移距离
- 3D移动，translate3d(x,y,z)，x代表水平轴，y代表垂直抽，z代表从屏幕指向眼睛z轴
- 旋转：transform旋转
- 2d旋转：rotate(角度),顺时针是正值，逆时针是负值
- transform: rotate3d(x,y,z);x,y,z形成一个向量，以这个向量为轴进行旋转
- transform: rotateX() rotateY() rotateZ();按照x,y,z轴进行旋转
- 缩放：
- scale（2）放大的倍数
- 倾斜：
- skew(x轴拉伸角度，y轴拉伸角度)
- transform: skew(45deg,0);
transition过渡动画
transition：过渡属性 过渡时间 过渡的速度变化 过渡的动画延迟时间；
transition语法格式：transition: property duration timing-function delay;
代码示例：transition:width 2s ease-in 500ms;
知识点一：transition-property 规定设置过渡效果的 CSS 属性的名称。
- 语法格式：transition-property: none|all|property;
- 注意事项：只设置这一个无效果，因为默认动画时长是0.需要配合时长最 终效果等一块设置才有效。
- 参数说明：
- none 没有属性会获得过渡效果。
- all 所有属性都将获得过渡效果。
- property 定义应用过渡效果的 CSS 属性名称列表，列表以逗号分隔。
- 代码示例：transition-property:width,height;
- JS中调用方法：object.style.transitionProperty="width,height";
- 思考：transition-property:all; 与 transition-property:none; 的区别
知识点二：transition-duration 规定完成过渡效果需要多少秒或毫秒。默认值是 0不会有效果。
- 语法格式：transition-duration:时间长度;
- 代码示例：
- transition-duration:5s; 这里单位一定要带上，5秒的意思。 1秒= 1000毫秒
- transition-duration:5000ms; 这里单位是毫秒的意思。单位不可省略。
- JS中调用方法：object.style.transitionDuration="5s"
知识点三：transition-timing-function 规定速度效果的贝塞尔曲线。
- 语法格式：transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n);
- 参数说明：
- linear 规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。
- ease 规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。
- ease-in 由慢到快（等于 cubic-bezier(0.42,0,1,1)）。
- ease-out 由快到慢（等于 cubic-bezier(0,0,0.58,1)）。
- ease-in-out 由慢到快再到慢（等于 cubic-bezier(0.42,0,0.58,1)）。
- cubic-bezier(n,n,n,n) 课在函数中定义自己的值。取值范围0 至 1 之间的数值。
- 代码示例：
- transition-timing-function: ease-in-out;
- transition-timing-function: cubic-bezier(0,0,1,1);
- JS中调用方法：object.style.transitionTimingFunction="linear"
- 关于贝塞尔曲线见专题说明文档,供大家业余学习。
知识点四：transition-timing-function 的特殊值
- transition-timing-function :
- 还可以有值： step-start | step-end | steps(<integer>[, [ start | end ] ]?)
- steps函数
- step-start：等同于 steps(1, start)
- step-end：等同于 steps(1, end)
- steps(<integer>[, [ start | end ] ]?)：
接受两个参数的步进函数。第一个参数必须为正整数，指定函数的步数。第二个参数取值可以是start或end，
指定每一步的值发生变化的时间点。第二个参数是可选的，默认值为end。
知识点五：transition-delay 定义过渡效果何时开始，单位是秒或者毫秒。
- 语法格式：transition-delay:多长时间后开始
- 代码示例：
- transition-delay:5s; 秒 1秒= 1000毫秒
- transition-delay:500ms; 毫秒
- JS中使用方法：object.style.transitionDelay="2s"
案例：
可以为同一元素的多个属性定义过渡效果。
transition:border-color .5s ease-in .1s, background-color .5s ease-in .1s, color .5s ease-in .1s;拆分方式：
transition-property:border-color, background-color, color;
transition-duration:.5s, .5s, .5s;
transition-timing-function:ease-in, ease-in, ease-in;
transition-delay:.1s, .1s, .1s;具体案例
1.过渡动画
效果图如下：
关键代码如下：
/*过渡动画*/
/*
transition:过渡属性 过渡的时间 过渡的时候速度变化 过渡的动画的延迟时间
* */
transition: background 5s ease-in 5s;
/*
linear 线性速度
ease 默认（先慢加快再慢）
ease-in 先慢后快
ease-out 先块后慢
ease-in-out（先慢加快再慢）
* */
transition:transform 3s ease-in-out;
}
.main2:hover .div2{
transform: translate(600px,0);
}
2.加载动画
效果图如下：
关键代码如下：
<style type="text/css">
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.loading{
width: 500px;
height: 300px;
margin: 100px auto;
}
.loadingItem{
float: left;
width: 100px ;
height: 300px;
padding: 20px;
}
.loadingItem span{
display:inline-block;
width:100%;
height:100%;
background:skyblue;
animation: changeColor 5s infinite;
}
.loadingItem:nth-child(1){
animation: loading 1s infinite;
}
.loadingItem:nth-child(2){
animation: loading 1s 0.1s infinite;
}
.loadingItem:nth-child(3){
animation: loading 1s 0.2s infinite;
}
.loadingItem:nth-child(4){
animation: loading 1s 0.3s infinite;
}
.loadingItem:nth-child(5){
animation: loading 1s 0.4s infinite;
}
@keyframes loading{
0%{
transform: scale(1);
background: skyblue;
}
25%{
transform: scale(1,1.8);
background: purple;
}
50%{
transform: scale(1);
background: pink;
}
}
@keyframes changeColor{
0%{
background: skyblue;
}
50%{
background: salmon;
}
100%{
background: skyblue;
}
}
</style>3.动画
效果图如下：
关键代码如下：
<style type="text/css">
.div1{
width: 200px;
height: 200px;
background: deepskyblue;
/*
animation:动画的关键帧名字 动画时间周期 动画的速度 动画的延迟时间 动画的次数 是否保留最后一帧
*/
/*这是综合设置*/
animation: moveAnimation 5s linear 3 forwards;
/*animation-name: moveAnimation;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 3s;
animation-iteration-count: 3;
animation-fill-mode: forwards; */
}
@keyframes moveAnimation{
0%{
transform: translate(0,0);
}
25%{
transform: translate(500px,0);
}
50%{
transform: translate(500px,500px);
}
75%{
transform: translate(0,500px);
}
100%{
transform: translate(0,0);
}
}
</style>4.垂直上下居中
效果图如下：
关键代码如下：
/*第一种方式*/
left: 50%;
top: 50%;
/*借用margin-top和margin-left*/
margin-left: -50px;
margin-top: -50px;
/*第二种方式*/
/*left: calc(50% - 50px);
top: calc(50% - 50px);*/5.往返运动
效果图如下：
关键代码如下：
<style type="text/css">
.div1{
width: 100px;
height: 100px;
background: skyblue;
animation: wangfan 3s infinite alternate;
/*动画的方向，normal,alternate,alternate-reverse*/
/*
alternate:奇数次按照正常运行，偶数次逆着运行
alternate-reverse:奇数次逆行，偶数次顺行
* */
animation-direction: alternate-reverse;
}
@keyframes wangfan{
from{
transform: translate(0,0);
}
to{
transform: translate(500px,0);
}
}
</style>6.表单样式
效果图如下：
关键代码如下：
<style type="text/css">
.div1{
width: 200px;
height: 200px;
background: #ccc;
margin: 0 auto;
transition: all 2s;
}
/*选中后面的同级元素*/
#input1:checked ~ .div1{
background: skyblue;
border-radius: 20px;
box-shadow:0 0 50px skyblue;
animation: xuanzhuan 2s linear infinite;
}
@keyframes xuanzhuan{
from{
transform: rotate(0deg);
}
to{
transform: rotate(360deg);
}
}
#input2:checked ~ .div1{
background: salmon;
border-radius: 100px;
box-shadow: 0 0 20px salmon,0 0 50px yellow;
}
.btn{
text-align: center;
}
.btn label{
display: inline-block;
width: 200px;
height: 80px;
text-align: center;
line-height: 80px;
border-radius: 20px;
background: salmon;
margin: 20px 30px;
}
</style>
</head>
<body>
<div class="btn">
<label for="input1">男</label>
<label for="input2">女</label>
</div>
<hr />
<!--
属性hidden可以将输入框隐藏起来
-->
<input type="radio" id="input1" name="sex" value="男" hidden="hidden" />
<input type="radio" id="input2" name="sex" value="女" hidden="hidden" />
<hr />
<div class="div1">
<div class="tt">
</div>
</div>
</body>7.一个魔方具体案例
效果图如下：
关键代码如下：
.main{
perspective: 1000px;
transform-style: preserve-3d;
}
.mofang{
width: 200px;
height: 200px;
margin: 100px auto;
position: relative;
transition: all 5s;
transform-style: preserve-3d;
transform: rotate3d(-1,1,0,0deg) scale3d(1,1,1);
}
.mofang div{
width: 200px;
height: 200px;
position: absolute;
top: 0;
left: 0;
/*opacity透明度设置：完全透明是0，完全不透明是1*/
opacity: 0.6;
border: 1px solid #ccc;
transition: all 5s;
}
.front{
background: url(img/1.png);
background-size: 100% 100%;
transform: translateZ(100px);
}
.back{
background: url(img/2.jpg) ;
background-size: 100% 100%;
/*transform: translateZ(-100px);*/
transform: rotateY(180deg) translateZ(100px);
}
.left{
background: url(img/3.jpg) ;
background-size: 100% 100%;
transform: rotateY(90deg) translateZ(100px);
}
.right{
background: url(img/4.jpeg) ;
background-size: 100% 100%;
transform: rotateY(-90deg) translateZ(100px);
}
.top{
background: url(img/5.jpeg) ;
background-size: 100% 100%;
transform: rotateX(90deg) translateZ(100px);
}
.bottom{
background: url(img/6.jpg);
background-size: 100% 100%;
transform: rotateX(-90deg) translateZ(100px);
}
.main:hover .mofang{
transform: rotate3d(-1,1,0,360deg) scale3d(2,2,2);
}
/*.main:hover .mofang{
transform:scale3d(2,2,2);
}*/
/*.main:hover .top{
transform: rotateX(90deg) translateZ(200px);
}*/
#zhengmian:checked ~ .main .mofang{
transform: rotate3d(-1,1,0,0deg) scale3d(1,1,1);
}
#xuanzhuan:checked ~ .main .mofang{
animation: xuanzhuan 2s infinite alternate;
}
@keyframes xuanzhuan{
from{
transform: rotate3d(-1,1,0,0deg) scale3d(1,1,1);
}
to{
transform: rotate3d(-1,1,0,360deg) scale3d(2,2,2);
}
}8.滑块开关
效果图如下：
关键代码如下：
<style type="text/css">
.kuaiguan{
width: 400px;
height: 200px;
margin: 0 auto;
display: block;
border: 1px solid #ccc;
position: relative;
}
.huakuai{
width: 200px;
height: 200px;
display: block;
background: pink;
position: absolute;
left: 0;
top: 0;
z-index: 10;
transition: all 1s;
}
.kuaiguan .before{
display: block;
position: absolute;
width: 200px;
height: 200px;
left: 0;
top: 0;
font-size: 100px;
font-weight: 700;
line-height: 200px;
text-align: center;
color: #fff;
transition: all 1s;
}
.kuaiguan .after{
display: block;
position: absolute;
width: 200px;
height: 200px;
right: 0;
top: 0;
font-size: 100px;
font-weight: 700;
line-height: 200px;
text-align: center;
color: #666;
transition: all 1s;
}
#toggle:checked ~ .kuaiguan .huakuai{
transform: translate(200px,0);
background: deepskyblue;
}
#toggle:checked ~ .kuaiguan .before{
color: #666;
}
#toggle:checked ~ .kuaiguan .after{
color: #fff;
}
</style>9.火影动画效果制作
效果图如下：
关键代码如下：
.mingren{
width:400px;
height: 200px;
background: url(img/mingren.png);
/*如果要实现游戏技能的动画，那么需要用到steps属性*/
animation: mingren 2s infinite steps(16);
}
@keyframes mingren{
from{
background-position: 0 0;
}
to{
background-position: 0px -3072px;
}
}
.zuozhu{
width:400px;
height: 100px;
background: url(img/zuozhu.png);
animation: zuozhu 2s infinite steps(13);
position: absolute;
}
@keyframes zuozhu{
from{
background-position: 0 0;
}
to{
background-position: 0 -2496px;
}
}10.总结
- 动画属性
- 可参考：https://blog.csdn.net/u013243347/article/details/79976352
- animation: /* animation:动画的关键帧名字 动画时间周期 动画的速度 动画的延迟时间 动画的次数 是否保留最后一帧 是否往返运动 */ /*这是综合设置*/ animation: moveAnimation 5s linear 3 forwards; /*animation-name: moveAnimation; animation-duration: 5s; animation-timing-function: linear; animation-delay: 3s; animation-iteration-count: 3; animation-fill-mode: forwards; */ /*动画的方向，normal,alternate,alternate-reverse*/ /* alternate:奇数次按照正常运行，偶数次逆着运行 alternate-reverse:奇数次逆行，偶数次顺行 * */ animation-direction: alternate-reverse; @keyframes moveAnimation{ 0%{ transform: translate(0,0); } 25%{ transform: translate(500px,0); } 50%{ transform: translate(500px,500px); } 75%{ transform: translate(0,500px); } 100%{ transform: translate(0,0); } } 游戏动画制作： .mingren{ width:400px; height: 200px; background: url(img/mingren.png); /*如果要实现游戏技能的动画，那么需要用到steps属性*/ animation: mingren 2s infinite steps(16); } @keyframes mingren{ from{ background-position: 0 0; } to{ background-position: 0px -3072px; } }
- 垂直上下居中
- .main{ width: 600px; height: 400px; background: cornsilk; margin: 0 auto; position: relative; } .content{ width: 100px; height: 100px; background: skyblue; position: absolute; /*第一种方式*/ /*left: 50%; top: 50%;*/ /*借用margin-top和margin-left*/ /*margin-left: -50px; margin-top: -50px;*/ /*第二种方式*/ /*left: calc(50% - 50px); top: calc(50% - 50px);*/ }
- 表单样式
- ------------------------- <label for="input1">男</label> <label for="input2">女</label> <hr /> <input type="radio" id="input1" name="sex" value="男" /> <input type="radio" id="input2" name="sex" value="女" /> -------------------------- ------------------------- /*选中后面的同级元素*/ #input1:checked ~ .div1 ------------------------- label 标签的for属性通过ID名字和输入框相绑定，那么点击label的标签，就像点击输入框标签一样 <!-- 属性hidden可以将输入框隐藏起来 --> <input type="radio" id="input1" name="sex" value="男" hidden="hidden" />
- overflow:hidden有两个作用，分别说明：
- 1、隐藏溢出
- 当我们没有给父级元素div设置高度的时候，子级元素div的高度就会撑开父级元素div；而当我们给父级元素div加上一个高度值，那么无论子级元素div的高度是多少，最终显示的高度都是父级元素设定的值。子级元素div超出的部分就会被隐藏。这就是隐藏溢出的含义!
- 2、清除浮动
- 当子级元素div加上浮动这个属性的时候，在显示器的侧面，它已经脱离了父级元素div，也就是说变成了一个立体的模型（实际是脱离了文档流，不占用文档流的空间）。此时的子级元素的宽高是多少， 对于父级元素来说都不起作用。这时候我们给父级元素这个div加上overflow:hidden这个属性的时候，其中的子级元素的浮动属性就会被清除，重新在文档流中开辟一块地方，给子级元素显示。
- 当父级元素没有设置浮动，而子元素设置了浮动时，子元素脱离文档流，父级元素高度没法扩展，被缩成一条。在父层用overflow:hidden恢复父层高度，与内容高度自适应。
- End -
本文参与 腾讯云自媒体同步曝光计划，分享自微信公众号。
原始发表：2019-06-21，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
腾讯云开发者
