css3 绕中心旋转
导读:CSS3 绕中心旋转是指在页面中,将一个元素绕其自身中心进行旋转的效果,在实际开发中非常常见。下面就让我们来了解一下如何使用CSS3实现绕中心旋转的效果。/* 为需要进行绕中心旋转的元素设置样式 */.rotate {width: 100p...
CSS3 绕中心旋转是指在页面中,将一个元素绕其自身中心进行旋转的效果,在实际开发中非常常见。下面就让我们来了解一下如何使用CSS3实现绕中心旋转的效果。
/* 为需要进行绕中心旋转的元素设置样式 */.rotate { width: 100px; height: 100px; background-color: red; position: relative; /*设置元素的中心点位置为正中央*/left: 50%; top: 50%; /* 设置元素的变形原点为正中央 */transform-origin: 50% 50%; } /* 给元素添加旋转动画效果 */.rotate:hover { /* 设置旋转角度为360度,即一圈 */transform: rotate(360deg); /* 设置旋转时间为2s */transition: transform 2s; }
以上代码中,我们首先为需要进行绕中心旋转的元素设置样式,其中需要注意的是,我们将元素的中心点位置设置为页面正中央,变形原点也设置为页面正中央以便于后面的旋转操作。接着,我们为元素添加旋转动画效果,设置旋转角度为360度,即一圈,旋转时间为2秒。
这样,当用户鼠标悬停在该元素上时,该元素便会完成一圈绕中心旋转的效果,非常炫酷。
声明:本文内容由网友自发贡献,本站不承担相应法律责任。对本内容有异议或投诉,请联系2913721942#qq.com核实处理,我们将尽快回复您,谢谢合作!
若转载请注明出处: css3 绕中心旋转
本文地址: https://pptw.com/jishu/568592.html