CSS 3d旋转代码分享
<style type="text/css">.iRotate {
cursor:pointer;
perspective: 800px;
transition:1s ease;
}
.iRotate:hover {
transform:rotateY(180deg);
}
</style>
<p>本示范针对图片，其他HTML可视box元素也行，如div等。效果需要鼠标移动到图片来触发，代码放在二楼：<br> </p>
<p style="text-align:center;"><img class="iRotate" alt="" src="https://www.huachaowang.com/data/attachment/forum/202201/03/093625rzd54d5fgoehr0cn.jpg"></p>
本帖最后由 马黑黑 于 2022-1-3 18:26 编辑
核心代码：
<style type="text/css">
.iRotate {
cursor:pointer;
transition:1s ease;
}
.iRotate:hover {
transform:rotateY(180deg);
}
</style>
<img class="iRotate" alt="" src="https://www.huachaowang.com/data/attachment/forum/202201/03/093625rzd54d5fgoehr0cn.jpg">
本帖最后由 马黑黑 于 2022-1-3 23:54 编辑
3d旋转也是用到 transform ，不同的是 2d 用的是 rotate，3D用的是 rotateX 和 otateY，示范中使用了 rotateY 属性，可以试试 rotateX 感受一下两者间的区别。
transition:1s ease 一句的作用是让变化不那么生硬，没有也行。
点一下旋转一次~~{:5_153:} 杨柳青 发表于 2022-1-3 18:31
点一下旋转一次~~
不用点，移过去就行，就一次 电脑里面的名堂好深沉，小黑都吃通透了。{:4_199:} 樵歌 发表于 2022-1-3 19:23
电脑里面的名堂好深沉，小黑都吃通透了。
弱水三千我只取一瓢饮 厉害厉害，老黑，我真的佩服你。我没有分了，不能评分了哈。 加林森 发表于 2022-1-3 19:44
厉害厉害，老黑，我真的佩服你。我没有分了，不能评分了哈。
分不分无所谓，给5刀就行{:4_170:} 马黑黑 发表于 2022-1-3 19:46
分不分无所谓，给5刀就行
给了十刀还不够吗？{:4_203:} 加林森 发表于 2022-1-3 19:53
给了十刀还不够吗？
差不多差不多 这个好像鼠标上去，有时直接转换到镜像图，有时还是原图。
不过鼠标能让图片缩小，也很神奇{:4_187:} 马黑黑 发表于 2022-1-3 20:05
差不多差不多
应该满足了吧 加林森 发表于 2022-1-3 20:09
应该满足了吧
还行还行 马黑黑 发表于 2022-1-3 20:19
还行还行
那就好那就好 红影 发表于 2022-1-3 20:07
这个好像鼠标上去，有时直接转换到镜像图，有时还是原图。
不过鼠标能让图片缩小，也很神奇
这效果应该跟CPU、GPU性能有关。你的机器应该是古董级别的{:4_170:} 加林森 发表于 2022-1-3 20:19
那就好那就好
{:4_181:} 马黑黑 发表于 2022-1-3 20:21
{:4_199:} 马黑黑 发表于 2022-1-3 19:38
弱水三千我只取一瓢饮
瞧瞧，有大本事的人都谦虚不是。 樵歌 发表于 2022-1-3 20:37
瞧瞧，有大本事的人都谦虚不是。
谦虚使人发胖
页:
[1]
2