css中怎么用matrix逆时针旋转

html-css018

css中怎么用matrix逆时针旋转,第1张

1、首先准备一个HTML文档,文档中准备好两个图片,接下来会对这两个图片进行旋转。

2、其次对HTML中的内容定义一些样式,给图片设置过渡效果,过渡使用transition属性。

3、最后正数代表的是顺时针,负数代表的是逆时针,运行程序后将鼠标放在图片上调为逆时针旋转即可。

transform:属性应用 2D 或 3D 转换。该属性允许我们对元素进行旋转(rotate)、缩放(scale)、移动(translate)、倾斜,扭曲(skew),设置基点位置transform-origin:50% top

 rotate:         是transform的值,定义2D或3D的旋转,在一个给定度数顺时针旋转的元素。负值是允许的,这样是元素逆时针旋转。

                     2D:rotate( angle )定义 2D 旋转,在参数中规定角度。

                     3D:rotate3d( x , y , z , angle )定义 3D 旋转。

                     事例:2D:transform: rotate(45deg)3D:ransform: rotate3d(0,0,0,45deg)

scale:           是transform的值,定义 2D 或3D缩放,表示对当前元素的缩放。

                    2D:scale(x,y)定义 2D 缩放,对当前元素的宽度是原始大小的x倍,高度是原始大小的y倍。

                    3D:scale3d( x , y , z )定义 3D 缩放,对当前元素在x轴,y轴,z轴的缩放。

                    事例:2D:scale: scale(2,3)3D:ransform: scale3d(0,0,1)

translate  :是transform的值,定义 2D 或3D转换,表示对当前元素的位移。

                    2D:translate( x , y )定义 2D 转换,沿着 X 和 Y 轴移动元素。

                   3D:translate3d( x , y , z )定义 3D 转化。

                   事例:2D:transform: translate(50px,100px)3D:ransform: translate3d(50px,100px,50px)

skew:       是transform的值,定义倾斜,表示对当前元素的倾斜角度。

                   skew( x-angle , y-angle )定义 2D 倾斜,分别表示X轴和Y轴倾斜的角度,如果第二个参数为空,则默认为0,参数为负表示向相反方向倾斜

                   事例:transform: skew(1deg,2deg)

transition属性:允许CSS属性值在一定的时间区间内平滑的过渡,只能设置 初始值和结束值,需要事件的触发,例如单击、获取焦点、失去焦点等

                        transition : transition-property   transition-duration   transition-timing-function   transition-delay

                        transition-property :规定应用过渡的 CSS 属性的名称。

                      transition-duration :定义过渡效果花费的时间。默认是 0。

                      transition-timing-function :规定过渡效果的时间曲线。默认是 "ease"。

                      transition-delay :规定过渡效果延迟的时间。默认是 0。

                      事例:  transition : width 2s ease-in-out  1s

animation属性:通过帧动画对当前元素的某些属性进行帧动画的播放,功能相似于transition,但更加的精确、可以控制到每一帧,高版本的浏览器还支持css或者JS控制停止动画 以及获取动画当前                            状态等,请用百分比来规定变化发生的时间,或用关键词 "from" 和 "to",等同于 0% 和 100%。0% 是动画的开始,100% 是动画的完成。

      @keyframes fadeIn {

                    0% {opacity:0}

                  100% {opacity:1}

         }

                          事例:animation:fadeIn 5s infinite(fadeIn是帧动画的名称)infinite 无限循环

@keyframes fadeIn {

0% {opacity:0}

100% {opacity:1}

}

@keyframes fadeout {

0% {opacity:1}

100% {opacity:0}

}

@keyframes pendulu {

from {transform:rotate3d(0,0,1,0)}

5.5% {transform:rotate3d(0,0,1,-11deg)}

7% {transform:rotate3d(0,0,1,-12deg)}

16% {transform:rotate3d(0,0,1,9deg)}

17.5% {transform:rotate3d(0,0,1,10deg)}

26.5% {transform:rotate3d(0,0,1,-7deg)}

28% {transform:rotate3d(0,0,1,-8deg)}

36.5% {transform:rotate3d(0,0,1,5deg)}

38% {transform:rotate3d(0,0,1,6deg)}

46.5% {transform:rotate3d(0,0,1,-4deg)}

48% {transform:rotate3d(0,0,1,-5deg)}

57% {transform:rotate3d(0,0,1,3deg)}

58.5% {transform:rotate3d(0,0,1,4deg)}

66.5% {transform:rotate3d(0,0,1,-2deg)}

68% {transform:rotate3d(0,0,1,-3deg)}

75% {transform:rotate3d(0,0,1,1.5deg)}

76.5% {transform:rotate3d(0,0,1,2.5deg)}

82.5% {transform:rotate3d(0,0,1,-1deg)}

84% {transform:rotate3d(0,0,1,-2deg)}

90% {transform:rotate3d(0,0,1,1.5deg)}

95% {transform:rotate3d(0,0,1,-1deg)}

to {transform:rotate3d(0,0,1,0)}

}

@keyframes scale {

0% {transform:scale(0.9)}

100% {transform:scale(1)}

}

@keyframes cloud {

0% {transform:translateX(0)}

25% {transform:translateX(30%)}

50% {transform:translateX(60%)}

75% {transform:translateX(30%)}

100% {transform:translateX(0)}

}

@keyframes  fadeInDown

{

0% {

    opacity: 0

    filter: alpha(opacity=0)

    -webkit-transform: translate3d(0, -100%, 0)

    transform: translate3d(0, -100%, 0)

}

100% {

    opacity: 1

    filter: alpha(opacity=100)

    -webkit-transform: none

    /* transform: none*/

}}

@-webkit-keyframes bounceIn {

0%,20%,40%,60%,80%,100% {

-webkit-transition-timing-function:cubic-bezier(.215,.61,.355,1)

transition-timing-function:cubic-bezier(.215,.61,.355,1)

}

0% {

opacity:0

filter:alpha(opacity=0)

-webkit-transform:scale3d(2,2,2)

transform:scale3d(2,2,2)

}

40% {

-webkit-transform:scale3d(.9,.9,.9)

transform:scale3d(.9,.9,.9)

}

60% {

-webkit-transform:scale3d(1.03,1.03,1.03)

transform:scale3d(1.03,1.03,1.03)

}

80% {

opacity:1

filter:alpha(opacity=100)

-webkit-transform:scale3d(.97,.97,.97)

transform:scale3d(.97,.97,.97)

}

100% {

-webkit-transform:scale3d(1,1,1)

transform:scale3d(1,1,1)

}

}

.rotate2d {

-webkit-animation-timing-function:linear

animation-timing-function:linear

-webkit-animation-name:rotate2d

animation-name:rotate2d

}

.box-bottle {

position:absolute

left:70%

width:pr(99)

height:pr(97)

background:url("#{$imgPath}btn-bottle.png")no-repeat

background-size:100%

transform-origin:35% 68%

opacity:0

z-index:10

div {

position:absolute

width:pr(18)

height:pr(35)

transform:translate3d(-150%,-20%,0)rotate3d(0,0,1,100deg)

transition:opacity .5s linear 1.5s

}

i {

position:absolute

width:pr(18)

height:pr(35)

background-repeat:no-repeat

background-size:100%

transform-origin:3000% 50%

opacity:0

&:nth-child(1) {

transition:transform 1s ease-out 1s,opacity .2s linear .9s

background-image:url("#{$imgPath}water1.png")

}

&:nth-child(2) {

transition:transform 1.1s ease-out .9s,opacity .2s linear .8s

background-image:url("#{$imgPath}water2.png")

}

&:nth-child(3) {

transition:transform 1.2s ease-out .8s,opacity .2s linear .7s

background-image:url("#{$imgPath}water3.png")

}

&:nth-child(4) {

transition:transform 1.3s ease-out .7s,opacity .2s linear .6s

background-image:url("#{$imgPath}water4.png")

}

&:nth-child(5) {

transition:transform 1.4s ease-out .6s,opacity .2s linear .5s

background-image:url("#{$imgPath}water5.png")

}

&:nth-child(6) {

transition:transform 1.5s ease-out .5s,opacity .2s linear .4s

background-image:url("#{$imgPath}water6.png")

}

}

&.active {

opacity:1

animation:pour 2.5s both

div {

opacity:0

}

i {

opacity:1

&:nth-child(1) {

transform:rotate3d(0,0,1,-25deg)

}

&:nth-child(2) {

transform:rotate3d(0,0,1,-25deg)translate3d(130%,50%,0)

}

&:nth-child(3) {

transform:rotate3d(0,0,1,-25deg)translate3d(260%,0,0)

}

&:nth-child(4) {

transform:rotate3d(0,0,1,-25deg)translate3d(0,150%,0)

}

&:nth-child(5) {

transform:rotate3d(0,0,1,-25deg)translate3d(130%,200%,0)

}

&:nth-child(6) {

transform:rotate3d(0,0,1,-25deg)translate3d(260%,150%,0)

}

}

}

}

animation实现动画由俩个部分组成,通过类似flash动画的关键帧来申明一个动画,在animation属性中调用关键帧声明的动画实现一个更为复杂的动画效果

关键帧 例如:

调用关键帧:

语法 animation:animation-name animation-duration animation-timing-function  animation-delay animation-iteration-count animation-direction

animation-name 由 @keyframes 创建的动画名称

animation-duration过渡时间

animation-timing-function过渡方式

animation-delay延迟时间

animation-iteration-count 动画的播放次数 通常值为1次 特殊值infinite为无限播放

animation-direction动画的播放方向,alternate为偶数次向前播放,normal动画每次都是循环向前播放

练习如下:

该图形的变化从左上角到右上角来回跳动的一个过程

linear  规定以相同速度开始至结束的过渡效果

ease  规定慢速开始,然后变快,然后慢速结束的过渡效果(默认值)

ease-in 规定以慢速开始的过渡效果

ease-out  规定以慢速结束的过渡效果

ease-in-out 规定以慢速开始和结束的过渡效果

 perspective:500px透视 也可以理解为视距,可以理解为 你的眼睛距离物体的距离  距离物体越近 物体就越大,距离物体越远 物体就越小

transform: rotateZ(30deg) rotateZ是绕着z轴旋转 正值是顺时针旋转 负值是逆时针旋转

transform: rotateY(30deg) rotateY是绕着y轴旋转 正值是向里面旋转 负值是向外面旋转

transform: rotateX(30deg)rotateX是绕着x轴旋转 正值是向里面旋转 负值是向外面旋转

transform: rotate(30deg)参数a取正值时元素相对原来中心顺时针旋转

 transform: translate3d(0, 0, 200px)效果如下:

 translate3d(0,0,200px) 表示z轴向前移动二楼200px(近大远小的原理)

 translate3d 里面分别表示x轴距离 y轴距离 和z轴距离

 要想实现3d效果必须要在父元素上加上一个属性perspective

如果想让子元素有3d的效果 必须要给父元素设置transform-style,默认值是flat, 想变成3d效果要把值设置成preserve-3d

也可以 设置旋转后的div的上下位置,在.b:hover里面加上transform-origin:top/bottom/left/right