css3-3d立方体旋转

最新推荐文章于 2024-07-23 16:10:02 发布
最新推荐文章于 2024-07-23 16:10:02 发布
阅读量212 收藏 1
点赞数
分类专栏： web前端 文章标签： css3 html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/file_Z/article/details/82259092
版权

做了一个css3-3d旋转的html
inde.html

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>
</body>
</html>

sytle.css

*{
    margin: 0;
    padding: 0;
    list-style: none;
}
ul{
    width: 200px;
    height: 200px;
    position: relative;;
    left: 0px;
    top: 0px;
    margin: 100px auto;
    transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;    
}
ul li{
    width: 200px;
    height: 200px;
    position: absolute;
    left: 0px;
    top: 0px;
    background: url('../musicboxpic/pic01.png');
}
ul:hover{
    -ms-animation:show 3s linear infinite;
    -moz-animation:show 3s linear infinite;
    -webkit-animation:show 3s linear infinite;
    -o-animation:show 3s linear infinite;
    animation:show 3s linear infinite; 
}
@keyframes show{
    0%{
        -ms-transform: rotateY(0deg) rotateZ(0deg);
        -moz-transform: rotateY(0deg) rotateZ(0deg);
        -webkit-transform: rotateY(0deg) rotateZ(0deg);
        -o-transform: rotateY(0deg) rotateZ(0deg);
        transform: rotateY(0deg) rotateZ(0deg);
    }
    100%{
        -ms-transform: rotateY(360deg) rotateZ(360deg);
        -moz-transform: rotateY(360deg) rotateZ(360deg);
        -webkit-transform: rotateY(360deg) rotateZ(360deg);
        -o-transform: rotateY(360deg) rotateZ(360deg);
        transform: rotateY(360deg) rotateZ(360deg);
    }
}
ul li:nth-of-type(1){
    background: url('../musicboxpic/pic01.png');
    -ms-transform: rotateY(90deg) translateZ(100px);
    -moz-transform: rotateY(90deg) translateZ(100px);
    -webkit-transform: rotateY(90deg) translateZ(100px);
    -o-transform: rotateY(90deg) translateZ(100px);
    transform: rotateY(90deg) translateZ(100px);
}
ul li:nth-of-type(2){
    background: url('../musicboxpic/pic02.png');
    -ms-transform: rotateY(-90deg) translateZ(100px);
    -moz-transform: rotateY(-90deg) translateZ(100px);
    -webkit-transform: rotateY(-90deg) translateZ(100px);
    -o-transform: rotateY(-90deg) translateZ(100px);
    transform: rotateY(-90deg) translateZ(100px);
}
ul li:nth-of-type(3){
    background: url('../musicboxpic/pic03.png');
    -ms-transform: rotateX(90deg) translateZ(100px);
    -moz-transform: rotateX(90deg) translateZ(100px);
    -webkit-transform: rotateX(90deg) translateZ(100px);
    -o-transform: rotateX(90deg) translateZ(100px);
    transform: rotateX(90deg) translateZ(100px);
}
ul li:nth-of-type(4){
    background: url('../musicboxpic/pic04.png');
    -ms-transform: rotateX(-90deg) translateZ(100px);
    -moz-transform: rotateX(-90deg) translateZ(100px);
    -webkit-transform: rotateX(-90deg) translateZ(100px);
    -o-transform: rotateX(-90deg) translateZ(100px);
    transform: rotateX(-90deg) translateZ(100px);
}
ul li:nth-of-type(5){
    background: url('../musicboxpic/pic05.png');
    -ms-transform: translateZ(100px);
    -moz-transform: translateZ(100px);
    -webkit-transform: translateZ(100px);
    -o-transform: translateZ(100px);
    transform: translateZ(100px);
}
ul li:nth-of-type(6){
    background: url('../musicboxpic/pic06.png');
    -ms-transform: translateZ(-100px);
    -moz-transform: translateZ(-100px);
    -webkit-transform: translateZ(-100px);
    -o-transform: translateZ(-100px);
    transform: translateZ(-100px);
}

图片素材
这里写图片描述
这里写图片描述
这里写图片描述
这里写图片描述
这里写图片描述
这里写图片描述

sails_z
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS3旋转的立方体
weixin_38469425的博客
04-08 182
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head lang="en"&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;style type="text/css"&gt; .cont
CSS3D之旋转立方体
are_gh的博客
01-01 226
CSS3D实现两层立方体旋转嵌套 <!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> body { perspective:1000px; background: #000; } .wrap { animation: run 5s linear infinite; transform-style:.
CSS3 3D炫酷旋转正方体特效
Infatuatedmonkey的博客
05-17 749
1.效果图 2.效果分析 这里主要用到了css3中的transform属性，和动画animation， 通过transform来拼装正方体，再通过动画让它旋转起来。 3.源码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>CSS3 3D选装魔方</title> <style> body{ /* 设置成黑色背景，使得
css3 立方体3d旋转效果
hahahahagee的博客
03-03 835
立方体3d旋转效果 通过上面的主题，我们就应该要知道今天我们需要那些东西来完成主题所说的立方体3d旋转特效。 我们需要立方体、旋转属性、动画这三个知识点。 第一步 我们要在网页中搭建立方体。 （分析：网页中是二维画面，我们需要三维画面） 所以我们需要一个属性：transform-style: preserve-3d;。这个属性，来改变网页中立方体所在的父元素为三维。 transform-styl...
CSS3 3D立方体旋转动画.zip
05-24
CSS3 3D立方体旋转动画，六面体动画特效。
CSS3制作3D图片立方体旋转特效.zip
07-04
CSS3制作3D图片立方体旋转特效是一款鼠标触碰模块炸开，大立方体中套小立方体特效。
CSS3实现3D立方体旋转动画特效.zip
07-03
CSS3实现3D立方体旋转动画特效是一款纯CSS3制作的3d旋转动画效果。
CSS3-3D动画制作旋转立方体
01-20
这对于构建3D立方体至关重要。 4. `animation`：应用动画到元素。在本例中，我们将`rotate`动画应用到`section`元素，设置动画的持续时间、速度曲线（线性，即匀速旋转）和无限循环。 5. `transform`：结合`rotate...
CSS3 3D立方体旋转展示特效
06-24
在本文中，我们将深入探讨如何使用CSS3和GSAP（GreenSock Animation Platform）来创建一个3D立方体旋转展示特效。这个特效可以用于网站设计、交互式元素或动态图形展示，为用户带来丰富的视觉体验。 首先，让我们...
纯css3 3D图片立方体旋转动画特效
09-08
本主题聚焦于“纯CSS3 3D图片立方体旋转动画特效”，这是一项利用CSS3的新特性实现的高级技巧，它可以为网页增添生动、动态的视觉体验。 首先，我们来详细探讨CSS3中的3D变换。CSS3的3D变换允许开发者创建出具有...
HTML5 CSS3 ： 3D立方体旋转动画实例源码
07-12
代码为博客实例代码：http://blog.csdn.net/lmj623565791/article/details/34120047 有问题博客中留言
CSS3骰子3D立方体旋转动画.zip
05-14
《CSS3实现3D立方体旋转动画详解》 在现代网页设计中，动态效果和交互体验成为了提升用户体验的重要因素。CSS3作为一门强大的样式表语言，提供了丰富的动画和转换功能，使得无需JavaScript或其他复杂的编程语言就能...
css3立方体旋转效果,jQuery+CSS3实现3D立方体旋转效果
weixin_34395361的博客
08-04 247
本文介绍了如何利用jQuery+CSS3实现3D立方体旋转效果，先看一看效果图：切换图片过程中，图片进行旋转：HTML结构3D图片画廊的图片列表和导航按钮分别使用两个无序列表来制作。 Image 1Image 2Image 3Image 4点击上面的按钮切换图片CSS样式为了制作3D透视效果，需要在#css3dimageslider元素上设置perspective 透视属性，并在它里...
CSS3 3D旋转立方
_andylala的博客
06-04 7769
一、3D中的透视 &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp;1、透视是我们观察事物的方式 &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp;在美术学中，有一种画法叫做透视画法，他让我们对所观察的物体从二维拓展到三维，也就是说，平面的物体变成了立体，占据了独自的空间。请看下图： &amp;nbsp; &amp;nbsp; &amp
css旋转立方体教程,如何通过CSS3实现旋转立方体
weixin_28691741的博客
08-04 968
主要通过CSS3中transform属性实现，首先给元素设置成3D元素，然后定义六个面的样式再通过transform属性对其进行旋转即可实现旋转立方体效果如今随着CSS3的不断成熟和发展，我们可以利用CSS3变换样式，translateZ，rotateX，rotateY，rotateZ，径向渐变，线性渐变，透视等属性创建一个可以旋转的3D立方体。接下来在文章中将为大家具体介绍如何通过CSS3实现这...
CSS3实现3D立方体旋转效果
小菜鸟笔记
12-01 1656
使用CSS3实现3D立方体选择效果，效果如下： 代码： Document #divs{ -webkit-perspective:500; -webkit-perspective-origin:50% 50%; overflow:hidden; margin-top:100px; } #group{ height:250px; wi
HTML5 CSS3 诱人的实例 3D立方体旋转动画
sdfwcc的博客
11-16 1856
HTML5 CSS3 诱人的实例 3D立方体旋转动画
CSS3雷达扫描效果
最新发布
u011626414的专栏
07-23 499
这个示例创建了一个非常基础的雷达扫描效果。您可以根据需要调整颜色、大小、旋转速度等属性，以及添加更多的细节和效果。要创建一个CSS3的雷达扫描效果，我们可以使用CSS的动画（元素在2秒内从0度旋转到360度，从而实现连续的扫描效果。属性设置为50%，这会将扫描线的顶部置于雷达圆的中心，而。的圆形div作为雷达的主体，并在其中放置了一个名为。则会将其向上移动自身高度的一半，从而实现垂直居中。的垂直线，这条线将作为雷达的扫描线。，确保旋转的起点在元素的顶部中心。进行旋转，模拟雷达扫描的效果。
css 3D立方体旋转
05-13
你可以使用CSS 3D转换属性来创建一个旋转的立方体。以下是一个简单的示例代码，你可以根据需要进行修改和扩展： HTML代码： ```html 前面 后面 右侧 左侧 顶部 底部 ``` CSS代码： ```css .cube { ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值