虎虎旋转木马--开心、浪漫，你值得拥有

本文主要是介绍虎虎旋转木马--开心、浪漫，你值得拥有，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

前言

一、2D转换--transform

1、移动translate

2、旋转rotate

3、转换中心点

4、缩放--scale

5、2D转换综合写法

二、动画

1、动画基本使用

2、动画常用属性

3、动画简写属性

4、速度曲线细节

三、3D转换

1、3D移动translate3d

2、透视-- perspective

3、3D旋转

4、3D呈现transfrom-style

四、虎虎旋转木马效果展示

总结

前言

今天给大家简单的分享一下关于H5C3的进阶，包括有2D转换、动画以及3D转换的相关知识点，学完用起来相当可以的。

一、2D转换--transform

1、移动translate

a、语法
transform: translate(x,y);或者分开写transform: translatex (n);
transform: translateY(n);
b、重点
定义2D转换中的移动，沿着X和Y轴移动元素translate

最大的优点:不会影响到其他元素的位置
translate中的百分比单位是相对于自身元素的translate:(50%,50%);

对行内标签没有效果

2、旋转rotate

a.语法
transform : rotate(度数)
b.重点
rotate里面跟度数，单位是deg，比如 rotate(45deg)角度为正时，顺时针，负时，为逆时针
默认旋转的中心点是元素的中心点

3、转换中心点

a.语法
transform-origin: x y;
b.重点
注意后面的参数×和y用空格隔开
x y默认转换的中心点是元素的中心点(50% 50%)
还可以给xy设置像素或者方位名词( top bottom left right center )

4、缩放--scale

a.语法
transform : scale(x,y);

b.注意
注意其中的x和y用逗号分隔
transform:scale(1,1):宽和高都放大一倍，相等于没有放大

transform:scale(2,2)︰宽和高都放大了2倍
transform:scale(2):只写一个参数，第二个参数则和第一个参数一样，相当于 scale(2,2)

transform:scale(0.5,0.5):缩小
sacle缩放最大的优势∶可以设置转换中心点缩放，默认以中心点缩放的，而且不影响其他盒子

5、2D转换综合写法

注意:
1.同时使用多个转换，其格式为:transtorm: transiate(） rotate(度数) scale(x,y);

2.其顺序会影转换的效果。(先旋转会改变坐标轴方向)
3.当我们同时有位移和其他属性的时候，记得要将位移放到最前

二、动画

1、动画基本使用

制作动画分为两步：先定义动画；再调用

第一步：首先用keyframes定义动画(类似定义类选择器)
keyframes 动画名称{
0%{
width : 100px;
}
100%{
width: 200px;
}
}

第二步：.元素使用动画
div {
width: 200px;
height: 200px;
background-color: aqua;
margin: 100px auto;/*调用动画*/
animation-name:动画名称;/*持续时间*/
animation-duration:持续时间;
}

动画序列
0%是动画的开始，100%是动画的完成。这样的规则就是动画序列。
在@keyframes中规定某项CSS样式，就能创建由当前样式逐渐改为新样式的动画效果。
动画是使元素从一种样式逐渐变化为另一种样式的效果。您可以改变任意多的样式任意多的次数。
请用百分比来规定变化发生的时间，或用关键词"from"和"to”，等同于0%和100%。

2、动画常用属性

属性描述
@keyframes 规定动画。

animation 所有动画属性的简写属性，除了animation-play-state属性。

animation-name 规定@keyframes动画的名称。(必须的)

animation-duration 规定动画完成一个周期所花费的秒或毫秒，默认是0。（必须的)

animation-timing-function 规定动画的速度曲线，默认是“ease"。

animation-delay 规定动画何时开始，默认是0。

animation-iteration-count 规定动画被播放的次数,默认是1，还有infinite

animation-direction 规定动画是否在下一周期逆向播放，默认是“normal ",alternate逆播放

animation-play-state 规定动画是否正在运行或暂停。默认是"running",还有"pause"。

animation-fill-mode 规定动画结束后状态，保持forwards回到起始backwards

3、动画简写属性

animation :动画名称持续时间运动曲线何时开始播放次数是否反方向动画起始或者结束的状态;
如：animation: myfirst 5s linear 2s infinite alternate;

简写属性里面不包含animation-play-state
暂停动画:animation-play-state: puased;经常和鼠标经过等其他配合使用

想要动画走回来，而不是直接跳回来:animation-direction : alternate

盒子动画结束后，停在结束位置:animation-fill-mode : forwards

4、速度曲线细节

animation-timing-function :规定动画的速度曲线，默认是“ease"
linear 动画从头到尾的速度是相同的。匀速
ease 黑默认。动画以低速开始，然后加快，在结束前变慢。
steps 指定了时间函数中的间隔数量(步长)

注意：steps步长一般会使用得到很多

三、3D转换

1、3D移动translate3d

translform：translateX(100px)∶仅仅是在x轴上移动

translform:translateY(100px):仅仅是在Y轴上移动
translform:translateZ(100px):仅仅是在Z轴上移动

注意:translateZ一般用px单位，transform:translate3d(x,y,z)∶其中x、y、z分别指要移动的轴的方向的距离

z轴搭配透视来完成，z轴值是正的向外移动，负值向里移动，3d里面的值不能省略

2、透视-- perspective

如果想要在网页产生3D效果需要透视(理解成3D物体投影在2D平面内)。模拟人类的视觉位置，可认为安排一只眼睛去看
透视我们也称为视距:视距就是人的眼睛到屏幕的距离距离视觉点越近的在电脑平面成像越大，越远成像越小透视的单位是像素
透视越大看到的物体越小
透视写在被观察元素的父盒子上面的
d:就是视距，视距就是一个距离人的眼睛到屏幕的距离。
z：就是z轴，物体距离屏幕的距离，z轴越大（正值）我们看到的物体就越大。

3、3D旋转

3D旋转指可以让元素在三维平面内沿着x轴，y轴，z轴或者自定义轴进行旋转。

语法：
transform:rotate×(45deg):沿着x轴正方向旋转45度

transform:rotateY(45deg) :沿着y轴正方向旋转45deg

transform:rotateZ(45deg):沿着Z轴正方向旋转45deg
transform:rotate3d(x,y,z,deg):沿着自定义轴旋转deg为角度（了解即可)

4、3D呈现transfrom-style

它是控制子元素是否开启三维立体环境。。
transform-style:flat子元素不开启3d立体空间默认的，transform-style: preserve-3d;子元素开启立体空间，代码写给父级，但是影响的是子盒子
这个属性很重要，后面必用

四、虎虎旋转木马效果展示

代码：

   <style>body {perspective: 1200px;}section {position: relative;width: 350px;height: 300px;margin: 150px auto;transform-style: preserve-3d;animation: rotate 10s linear infinite;background: url(img/6.png) no-repeat;}section:hover {animation-play-state: paused;}@keyframes rotate {0% {transform: rotateY(0deg);}100% {transform: rotateY(360deg);}}section div {position: absolute;left: 0;top: 0;width: 100%;height: 100%;}.img1 {transform: translateZ(300px);background: url(img/1.png) no-repeat;}.img2 {transform: rotateY(60deg) translateZ(300px);background: url(img/2.png) no-repeat;}.img3 {transform: rotateY(120deg) translateZ(300px);background: url(img/7.png) no-repeat;}.img4 {transform: rotateY(180deg) translateZ(300px);background: url(img/4.png) no-repeat;}.img5 {transform: rotateY(240deg) translateZ(300px);background: url(img/5.png) no-repeat;}.img6 {transform: rotateY(300deg) translateZ(300px);background: url(img/6.png) no-repeat;}</style>
</head><body><section><div class="img1"></div><div class="img2"></div><div class="img3"></div><div class="img4"></div><div class="img5"></div><div class="img6"></div></section>

截图效果：