html：css3新特性：转换（二维，三维），过渡，动画
Posted 406070989senlin
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html：css3新特性：转换（二维，三维），过渡，动画相关的知识，希望对你有一定的参考价值。
转换
2D转换
二维平面移动
语法：
transform:translateX(移动的距离) translateY(移动的距离);
Transform:translate(水平移动距离，垂直移动距离)
可以设置负值，水平的正值是向右移动，垂直的正值是向下移动
二维平面旋转
语法：
Transform:rotate(30deg);
旋转原点的设置
transform-origin:center(默认值)
可以设置left,top,right,bottom,center,
百分比设置：transform-origin:水平位置的百分比 垂直位置的百分比
3D转换
透视点
在所看元素的父元素或者是祖先元素上设置透视点
语法:perspective: 1000px;
三维立体的移动
语法：
transform: translateZ(200px);
transform: translate3d(水平移动,垂直移动,z轴移动);
z轴：z轴垂直于屏幕，方向是射向我们。
三维立体的旋转
语法：
/*transform: rotateX(30deg);*/
/*transform: rotateY(30deg);*/
/*transform: rotateZ(30deg);*/
transform: rotate3d(1,1,1,30deg);
解析：rotate3d(x,y,z,30deg),用x,y,z建立一个用原点射向（x,y,z）这个坐标的向量，用这个向量作为轴进行旋转。
/*二维移动*/ /*transform: translateX(400px) translateY(400px);*/ transform: translate(400px,400px); /*旋转30度*/ transform: rotate(30deg); /*旋转原点的设置 transform-origin:center(默认值) 可以设置left,top,right,bottom,center, 百分比设置：transform-origin:水平位置的百分比 垂直位置的百分比 * */ transform-origin: 0% 50%; /* 从什么视角看三维*/ body{ perspective: 1000px; } /*三维移动：transform: translateZ(200px);*/ transform: translate3d(0,0,200px); /*三维旋转*/ /*transform: rotateX(30deg);*/ /*transform: rotateY(30deg);*/ /*transform: rotateZ(30deg);*/ transform: rotate3d(1,1,1,300deg);
/*倾斜*/
transform: skew(15deg,0deg);
/*反方向*/
transform: skew(-15deg,0deg);
/*这张图宽还是1，高放大3倍；*/
img{
display: block;
margin: 300px auto;
transform: scale(1,3);
}
{
width: 300px;
height: 200px;
background: skyblue;
margin: 300px auto;
整个放大两倍
/*transform: scale(2);*/
高不变，宽了3倍
transform: scale(3,1);
}
Transition过渡
综合设置：
transition: all 2s;
分别设置：
|
/*过渡效果*/ /*transition:height 2s,transform 3s,background 2s;*/ /*transition: all 2s linear;*/ /*保留子元素3d效果*/ /*过渡的属性*/ transition-property: all; /*过渡所消耗的时间*/ transition-duration: 2s; /*过渡变化的速度 linear线性速度 ease/ease-in/ease-out cubic-bezier(0.57,-0.34, 0.37, 1.44) * */ transition-timing-function: cubic-bezier(0.57,-0.34, 0.37, 1.44); /*过渡的延迟时间*/ /*transition-delay: 2s;*/ |
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> #d1{ width: 200px; height: 200px; background: skyblue; transform: rotate(0deg); /*过渡效果*/ /*transition:height 2s,transform 3s,background 2s;*/ /*transition: all 2s linear;*/ /*过渡的属性*/ transition-property: all; /*过渡所消耗的时间*/ transition-duration: 2s; /*过渡变化的速度 linear线性速度 ease/ease-in/ease-out cubic-bezier(0.57,-0.34, 0.37, 1.44) * */ transition-timing-function: cubic-bezier(0.57,-0.34, 0.37, 1.44); /*过渡的延迟时间*/ /*transition-delay: 2s;*/ } /*鼠标悬浮上去的状态*/ #d1:hover{ height: 400px; transform: rotate(360deg); background: purple; } </style> </head> <body> <div id="d1"> </div> </body> </html>
Animation:动画
综合设置语法：animation: donghua 4s infinite;
分别设置：
|
/*动画*/ /*animation: donghua 5s;*/ /*动画的名称*/ animation-name: donghua; /*一次动画所花费的时间*/ animation-duration: 3s; /*动画的速度*/ animation-timing-function: linear; /*动画延迟时间*/ animation-delay: 3s; /*设置动画的次数*/ animation-iteration-count: 3; /*设置动画的往返*/ animation-direction: alternate; /*保留最后一刻状态*/ animation-fill-mode: forwards; |
不同状态写在关帧里
|
@keyframes donghua{ 过程走到了%几 要达到什么效果 0%{ transform: translate(0,0); } 50%{ transform: translate(500px,0); } 100%{ transform: translate(500px,500px); } }
|
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> #d1{ width: 300px; height: 200px; background: skyblue; /*动画*/ /*animation: donghua 5s;*/ /*动画的名称*/ animation-name: donghua; /*一次动画所花费的时间*/ animation-duration: 3s; /*动画的速度*/ animation-timing-function: linear; /*动画延迟时间*/ animation-delay: 3s; /*设置动画的次数*/ animation-iteration-count: 3; /*设置动画的往返*/ animation-direction: alternate; /*保留最后一刻状态*/ animation-fill-mode: forwards; } @keyframes donghua{ 0%{ transform: translate(0,0); } 50%{ transform: translate(500px,0); } 100%{ transform: translate(500px,500px); } } </style> </head> <body> <div id="d1"> </div> </body> </html>
以上是关于html：css3新特性：转换（二维，三维），过渡，动画的主要内容，如果未能解决你的问题，请参考以下文章