学习探索-3D分割图片效果

3D分割图片效果

效果示例图
代码示例

效果示例图

鼠标移动上去恢复原样图

代码示例

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>3D分割图片效果</title><style type="text/css">* {padding: 0px;margin: 0px;box-sizing: border-box;-webkit-box-sizing: border-box;}.partition-block {width: 400px;height: 200px;margin: 60px auto;position: relative;/* 设置视距 */perspective: 50px;}.partition-items {/* 切割成四分，每份占四分之一 */width: 50%;height: 50%;position: absolute;background-image: url("img/13.jpg");/* 设置图片的大小和盒子的大小一样，background-size: 400px 200px; */background-size: 200% 200%;background-repeat: no-repeat;transition: all 0.3s;}.partition-items-1 {top: -10px;left: -10px;background-position: top left;transform: rotate3d(1, -1, -1, 3deg);}.partition-items-2 {top: -10px;right: -10px;background-position: top right;transform: rotate3d(1, 1, 1, 3deg);}.partition-items-3 {bottom: -10px;right: -10px;background-position: bottom right;transform: rotate3d(-1, 1, 1, 3deg);}.partition-items-4 {bottom: -10px;left: -10px;background-position: bottom left;transform: rotate3d(-1, -1, -1, 3deg);}.partition-block:hover>.partition-items-1 {top: 0px;left: 0px;background-position: top left;transform: rotate3d(0, 0, 0, 0deg);}.partition-block:hover>.partition-items-2 {top: 0px;right: 0px;background-position: top right;transform: rotate3d(0, 0, 0, 0deg);}.partition-block:hover>.partition-items-3 {bottom: 0px;right: 0px;background-position: bottom right;transform: rotate3d(0, 0, 0, 0deg);}.partition-block:hover>.partition-items-4 {bottom: 0px;left: 0px;background-position: bottom left;transform: rotate3d(0, 0, 0, 0deg);}</style></head><body><div class="partition-block"><div class="partition-items partition-items-1"></div><div class="partition-items partition-items-2"></div><div class="partition-items partition-items-3"></div><div class="partition-items partition-items-4"></div></div></body>
</html>

学习探索-3D分割图片效果相关推荐

史上最全 | 基于深度学习的3D分割综述（RGB-D/点云/体素/多目）
点击下方卡片,关注"自动驾驶之心"公众号 ADAS巨卷干货,即可获取点击进入→自动驾驶之心[分割]术交流群后台回复[分割综述]获取语义分割.实例分割.全景分割.弱监督分割等超全 ...
HTML5+CSS3 鼠标悬停3D立体图片效果
效果图: 设置一个盒子,里面放两个div. 2.div旋转并设阴影. 3.加伪类,使鼠标移入这个盒子的时候div有动画效果. 这样就完成应该是一个鼠标悬停立体图片的效果.
不会3D软件如何设计三维图片效果？
众所周知,3D设计是一门专业性很强的技术,对于特定的设计有着高标准的要求,学会这项技能可以创作优秀的三维动画效果及立体形象. 拥有一款合适的3D设计软件对于帮助自己创建完美的3D模型至关重要,就比如你 ...
基于FCN，U-Net的深度学习医学影像分割算法（细胞分割算法）以及传统算法分析
本博文主要分析了基于传统计算机视觉的细胞分割算法和基于深度学习的细胞分割算法.主要针对医学影像分割算法.包括了FCN全卷积网络的细胞分割效果,U-Net细胞分割效果.查阅了采用深度学习分割医学影像的几 ...
3D各向异性图片进行深度学习的解决方法
3D各向异性图片进行深度学习(图像分割/分类)的解决方法什么是各向异性常用的3D图像分割/分类网络 3D Unet V Net MedicalNet 各向异性问题的解决办法基于Z-Net的解决方 ...
js实现图片3D轮播效果（收藏）
3D的图片轮播效果很炫,写到这里只是为了不丢代码,不为别的. 效果预览: html代码: <head> <meta http-equiv="Content-Type&quo ...
怎样用ps做出3D分割效果海报图
怎样用ps做出3D分割效果海报图?无非就是将人物先残忍得分成几个部分,然后将分割部分做出横切面,伪装成3D效果. 接下来,我是被迫营业出这么残忍的教程. 1.找到一张你并不想伤害的人物素材 (叔叔,我 ...
JQ 实现轮播图（3D旋转图片轮播效果）
轮播图效果如下: 代码: <!DOCTYPE html> <html xmlns="/www.w3.org/1999/xhtml"> <head> ...
点云深度学习的3D场景理解
转载请注明本文链接: https://www.cnblogs.com/Libo-Master/p/9759130.html PointNet: Deep Learning on Point Sets ...

学习探索-3D分割图片效果

3D分割图片效果

效果示例图

代码示例

学习探索-3D分割图片效果相关推荐

最新文章

热门文章