实现Div的3D图片的360度旋转

最新推荐文章于 2024-05-10 04:54:27 发布
最新推荐文章于 2024-05-10 04:54:27 发布
阅读量1.3k 收藏 2
点赞数
分类专栏： css 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yueruitao/article/details/69525966
版权 

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>实现Div的3D图片的360度旋转-岳瑞涛</title>
    <style>
        *{
            font-size: 30px;color: #00DD00; padding:0; margin:0;

        }
        #yrt {
            position: relative;
            height: 300px;
            width: 300px;
            -webkit-perspective: 500;
            margin-top: 200px;
            margin-right: auto;
            margin-left: auto;
        }
        .yueruitao {
            margin: 10px;
            width: 280px;
            height: 280px;
            background-color: #8C0000;
            opacity: 0.3;
            -webkit-transform-style: preserve-3d;
            -webkit-animation: spin 15s infinite linear;
        }
        .yueruitao > div {
            position: absolute;
            top: 40px;
            left: 40px;
            width: 280px;
            height: 200px;
            padding: 10px;
            -webkit-box-sizing: border-box;
        }
        .yueruitao > :first-child {
            background-color: #ffff00;
            -webkit-transform: translateZ(-100px) rotateY(45deg);
        }
        .yueruitao > :last-child {
            background-color: #333;
            -webkit-transform: translateZ(50px) rotateX(20deg);
            -webkit-transform-origin: 50% top;
        }
        /*执行Y轴旋转360度动画*/
        @-webkit-keyframes spin {
            from {-webkit-transform: rotateY(0);}
            to {-webkit-transform: rotateY(360deg);}
        }
    </style>
</head>
<body>
<div id="yrt"><div><a href="http://blog.csdn.net/yueruitao">岳瑞涛</a></div>
    <div class="yueruitao">
        <div><a href="/">http://blog.csdn.net/yueruitao</a></div>
    </div>
</div>
</body>
</html>
蚂蚁小草
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
div盒子的3D旋转
ose_huang的博客
01-28 955
利用css的transform-style: preserve-3d和，transform: rotateX()来实现盒子的3d旋转。
实现图片360度球型3D旋转
11-09
实现图片360度球型3D旋转 [注意：本资源来自网络，如有侵权，请联系我删除，谢谢。]
3D应用旋转相册
最新发布
2401_84152928的博客
05-10 234
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！
html div 360旋转动画效果,CSS3简单实现div图层360deg旋转
weixin_29212429的博客
06-03 290
CSS3简单实现div图层360deg旋转.stage{ width: 200px; height: 200px; background-color: #acffa5; }.box1{ width: 50px; height: 50px; background-color: #b2caff; ...
关于div三维旋转
weixin_42546367的博客
10-09 181
下面是源代码 <!DOCTYPE html> <html> <head> <style> #div1 { position: relative; height: 150px; width: 150px; margin: 50px; padding:10px; border: 1px solid black; perspective:10000; -webkit-perspective:15000; /* Safari and Chrome */ ...
HTML5特效~3D立方体旋转
diji2219的博客
10-07 815
先欣赏一下该特效的最终效果 本文源码参考自http://www.cnblogs.com/ECJTUACM-873284962/进行一点点优化,下面是对此特效原理上的的剖析. 该特效是基于Css3的一些新特性拼接而成.主要用到了hover,transform和@keyframe...
html5将div转化为3d,css3 中怎样实现div的2d，3d旋转？
weixin_39922151的博客
06-10 243
html>demodiv {background: #000;color: #fff;width: 100px;height: 100px;margin: 50px;display: inline-block;}/*请用谷歌浏览器预览效果, 鼠标划过方块看效果*//*2D旋转*/.one:hover {-webkit-transition: all 0.5s ease-in-out;-web...
基于web 汽车360度旋转效果代码
12-18
接着，CSS3的3D转换功能是实现360度旋转的关键。使用`transform-style: preserve-3d;`确保子元素保持其3D空间中的位置，而`transition`属性则定义了旋转动画的平滑过渡。例如： ```css #car-rotator { perspective...
jQuery产品图片360度3D旋转展示代码
06-11
在实际应用中，这种360度旋转展示功能通常由以下几个关键部分组成： 1. **HTML结构**：`index.html`文件是整个页面的基础，它定义了页面的结构和元素。在这个场景中，HTML可能会包含一个容器元素（如`<div>`）来...
jquery茶壶360度图片旋转特效.zip
07-11
通过合理布局HTML、设置CSS样式，再结合JavaScript控制图片旋转，我们可以轻松创建出吸引人的360度旋转展示。这个技术不仅限于茶壶，可以应用于任何需要全方位展示的产品，提升用户的在线购物体验。
用JS实现产品360旋转
09-02
这个容器通常是一个`div`，并设置好相应的CSS样式，如宽度、高度、背景图片等，使其适应360度旋转的需求。 ```html <div id="product-container"></div> ``` **二、CSS基础** CSS部分主要是设置3D透视效果和初始...
3D旋转相册
08-21
图片立体叠加3D旋转切换相册特效
3D旋转相册.zip
10-14
网页3D旋转相册，负有代码，下载即可打开见到效果，还可以更换自己喜欢的相册进去，旋转的速度都可以调
可互动的360度超炫3D旋转立方体动画特效
03-22
插件描述：鼠标拖动立方体查看各个面，或点击左侧导航链接页可切换到相应的面。参考示例：http://www.jq22.com/jquery-info6304
jQuery产品图片360度3D旋转展示代码.rar
08-10
2. **图片元素**：使用`<img>`标签插入产品图片，并根据需要设置多个切片以实现360度旋转效果。 3. **交互元素**：可能还需要添加一些交互元素，如按钮或指示器，让用户触发旋转动作或查看旋转状态。 综上所述，...
html中的旋转变化,css3实现div旋转
weixin_39652136的博客
06-10 575
用CSS3编写:div旋转90度 0.5秒后变圆 0.5秒后放大2倍有一个相同的问题可是没有给正确答案 CSS布局HTML小编今天和大家分享大神列出代码指导无标题文档 body{ padding:0; margin:0; width:100%; height:100%; } .demo{ width:100px; height:100px; background:#ff6600; margin:1...
CSS3动画（360度旋转、旋转放大、放大、移动）
weixin_33937499的博客
06-05 185
为什么80%的码农都做不了架构师？>>> ...
css 图片绕中心3d 0度旋转
05-26
要让一张图片绕着中心点进行 3D 旋转，你可以使用 CSS3 的 `transform` 属性来实现。以下是一个示例代码： ```html <div class="container"> <img src="your-image-url.jpg" alt="Your Image"> </div> ``` ```css .container { perspective: 1000px; /* 定义透视距离 */ } img { width: 200px; height: 200px; margin: 50px auto; transform-style: preserve-3d; /* 保留 3D 效果 */ transform: translateZ(-100px); /* 把图片向后移动 100px */ transition: transform 0.5s ease-in-out; /* 添加过渡效果 */ } img:hover { transform: translateZ(-100px) rotateY(360deg); /* 在 0 度的位置绕 Y 轴旋转 360 度 */ } ``` 这个示例代码中，我们首先定义了一个包含图片的容器，并在容器上设置了 `perspective` 属性来创建透视效果。然后我们使用 `transform-style` 属性来保留 3D 效果，并把图片向后移动 100px，以便让它离观察者更近一些。接着，我们为图片设置了一个过渡效果，并在鼠标悬停时将它沿着 Y 轴旋转 360 度。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值