CSS3鼠标悬停图片360度旋转效果
生活随笔
收集整理的這篇文章主要介紹了
CSS3鼠标悬停图片360度旋转效果
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
布局：
<body><section class="photo"><div class="pic pic1"></div><div class="pic pic2"></div></section> </body>樣式：
<style>.photo{width: 600px;margin: 50px auto 0;display: flex;justify-content: space-between;align-items: center;}.photo .pic{width: 220px;height: 220px;background-color: aqua;border-radius: 50%;background-repeat: no-repeat;background-position: center center;background-size: 100%;border-radius: 110px;transition: transform 0.5s ease-out;}.photo .pic:hover{/* 變形 rotateZ ，X ,Y Z軸，X軸，Y軸，三種旋轉方向，角度可取負度數也可寫為turn. 1turn表示一圈*/transform: rotateZ(360deg);}.pic1{background-image: url(./1.jpg);}.pic2{background-image: url(./2.jpg);}</style>查看效果：
?
總結
以上是生活随笔為你收集整理的CSS3鼠标悬停图片360度旋转效果的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 工业设计算计算机类专业吗,北大工学院工业
- 下一篇： 用CSS实现立方体360度旋转