CSS3鼠标悬停360旋转效果

阅读321评论0
效果GIF:使用CSS3的transition和transform属性制作鼠标悬停360°旋转效果,先看看W3C对transition的说明transition: property duration timing-function delay;值描述transition-property规定设置过渡效果的 CSS 属性的名称。transition-durat...

效果GIF:

5c1f1481359878.gif

使用CSS3的transition和transform属性制作鼠标悬停360°旋转效果,

先看看W3C对transition的说明

transition: property duration timing-function delay;
描述
transition-property规定设置过渡效果的 CSS 属性的名称。
transition-duration规定完成过渡效果需要多少秒或毫秒。
transition-timing-function规定速度效果的速度曲线。
transition-delay定义过渡效果何时开始。


transform说明:

transform: none|transform-functions;

描述
none定义不进行转换。
matrix(n,n,n,n,n,n)定义 2D 转换,使用六个值的矩阵。
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)定义 3D 转换,使用 16 个值的 4x4 矩阵。
translate(x,y)定义 2D 转换。
translate3d(x,y,z)定义 3D 转换。
translateX(x)定义转换,只是用 X 轴的值。
translateY(y)定义转换,只是用 Y 轴的值。
translateZ(z)定义 3D 转换,只是用 Z 轴的值。
scale(x,y)定义 2D 缩放转换。
scale3d(x,y,z)定义 3D 缩放转换。
scaleX(x)通过设置 X 轴的值来定义缩放转换。
scaleY(y)通过设置 Y 轴的值来定义缩放转换。
scaleZ(z)通过设置 Z 轴的值来定义 3D 缩放转换。
rotate(angle)定义 2D 旋转,在参数中规定角度。
rotate3d(x,y,z,angle)定义 3D 旋转。
rotateX(angle)定义沿着 X 轴的 3D 旋转。
rotateY(angle)定义沿着 Y 轴的 3D 旋转。
rotateZ(angle)定义沿着 Z 轴的 3D 旋转。
skew(x-angle,y-angle)定义沿着 X 和 Y 轴的 2D 倾斜转换。
skewX(angle)定义沿着 X 轴的 2D 倾斜转换。
skewY(angle)定义沿着 Y 轴的 2D 倾斜转换。
perspective(n)为 3D 转换元素定义透视视图。


看到这来想必大家明白了吧,就是用transition动画属性和transform旋转属性来做。

这里用的是background,你也可以换成其他的

Deom:

<style>
.webstr360deg {
width: 220px;
height: 220px;
margin: 0 auto;
margin-top: 110px;
background: no-repeat url("images/1.jpg") left top;
-webkit-background-size: 220px 220px;
-moz-background-size: 220px 220px;
background-size: 220px 220px;
-webkit-border-radius: 110px;
border-radius: 110px;
-webkit-transition: -webkit-transform 2s ease-out;
-moz-transition: -moz-transform 2s ease-out;
-o-transition: -o-transform 2s ease-out;
-ms-transition: -ms-transform 2s ease-out;
}
.webstr360deg:hover {
-webkit-transform: rotateZ(360deg);
-moz-transform: rotateZ(360deg);
-o-transform: rotateZ(360deg);
-ms-transform: rotateZ(360deg);
transform: rotateZ(360deg);
}
</style>
<div class="webstr360deg"></div>

扩展:

不仅仅可以搞成旋转360,旋转度数可以自己根据情况设定。

同时,还可以利用transform的scale值来实现鼠标悬停图片放大缩小哈,->快速通道

0 位网友评论:

欢迎来评论

请填写验证码