CSS3旋转动画3D效果

最新推荐文章于 2024-08-08 19:32:21 发布
最新推荐文章于 2024-08-08 19:32:21 发布
阅读量760 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44568325/article/details/86555163
版权

开发工具与关键技术：关于CSS3的animation和transform 应用

作者：周乐献

撰写时间：2019/1/18

-------------------------------------------------------------------------------------------

首先我们先给它进行布局

<!doctype html>

<html>

<head>

    <meta charset="utf-8">

    <title>旋转效果</title>

    <link rel="stylesheet" href="CSS/index.css">//引入css

</head>

<body>

//首先创建一个div （用来装饰下格式可有可无）

<div>

    <div class="www qw">

          <div class="zx"></div>

          <div class="zc"></div>

          <div class="zv"></div>

       </div>

       <div class="www qe">

         <div class="as"></div>

         <div class="ad"></div>

         <div class="af"></div>

       </div>

        <div class="xuan">

            <div class="zhuan">

                <div class="yi"></div>

                <div class="er"></div>

                <div class="san"></div>

                <div class="si"></div>

                <div class="wu"></div>

                <div class="liu"></div>

                <div class="qi"></div>

                <div class="ba"></div>

                <i class="me">

                    <div class="left"></div>

                    <div class="right"></div>

                </i>

                <i class="do">

                    <div class="left"></div>

                    <div class="right"></div>

                </i>

            </div>

        </div>

    </div>

</body>

</html>

 

接下来用css来进行编辑

@charset "utf-8";

/* CSS Document */

//使其内外边距为0

*{

              margin: 0;

              padding: 0;

       }

//给body高度和宽度都设置为100%

       body{

              width: 100%;

              height: 100%;

              background:url(../image/I.png);//给它一张背景图片

              background-size: cover;//使图片覆盖整个body

              display: flex;//弹性布局，在这里是可以使内容随页面宽度变化而变化

              justify-content: center;//图片居中

              margin-top: 40px;//上外边距40像素

       }

.xuan{

       margin-top: 450px;//上外边距

       margin-left: 520px;//左外边距

       width: 600px;//宽度设置为600像素

       height: 600px;//高度设置为600像素

       border-radius: 350px;//边框的圆角弧度为360像素

       transform: rotateX(85deg);//向x轴旋转85度（deg=度）

       transform-style: preserve-3d;//3d效果

}

.zhuan{

       width: 600px; //宽度设置为600像素

       height: 600px; //高度设置为600像素

       border-radius: 350px; //边框的圆角弧度为360像素

            position: relative; //相对定位（以自身位置为中心）

       animation: hen 20s infinite forwards;

//hen需要绑定到的 keyframe 名称 infinite 无限循环（可以选择填循环次数）

// forwards当动画完成后，保持最后一个属性值

       transform-style: preserve-3d; //3d效果

}

.zhuan div{//zhuan这个类里面的所有div

       width: 200px;//宽度设置为200像素

       height: 200px; //高度设置为200像素

       border:1px solid #C82A2C;//边框：1像素 solid=实线  #C82A2C 边框的颜色

       border-radius: 10px;//边框弧度10像素

       animation: li 3s infinite;

//li需要绑定到的 keyframe名称 3s 执行时间 infinite 无限循环（可以选择填循环次数）

}

.yi{

       position: absolute;//绝对定位

       top:-100px;//top=上

       left: 200px;//left=左

       transform: rotate(0deg) rotateX(-90deg);//图片旋转角度

       background: url( ../image/A.PNG) repeat-x center; //url()引入图片 center 居中

       background-size: cover;//覆盖

}

.er{

       position: absolute;

       top:0px;

       left: 400px;

       transform: rotate(45deg) rotateX(-90deg);

       background: url( ../image/B.PNG) repeat-x center;

       background-size: cover;

}

 

.san{

       position: absolute;

       top:200px;

       left:-100px;

       transform: rotate(90deg) rotateX(-90deg);

       background: url( ../image/C.PNG) repeat-x center;

       background-size: cover;

}

.si{

       position: absolute;

       top:400px;

       right:0px;

       transform: rotate(135deg) rotateX(-90deg);

       background: url( ../image/D.PNG) repeat-x center;

       background-size: cover;

}

.wu{

       position: absolute;

       bottom: -100px;

       left: 200px;

       transform:rotate(180deg) rotateX(-90deg);

       background: url( ../image/E.PNG) repeat-x center;

       background-size: cover;

}

.liu{

       position: absolute;

       top:400px;

       left:0px;

       transform: rotate(225deg) rotateX(-90deg);

       background: url( ../image/F.png) repeat-x center;

       background-size: cover;

}

.qi{

       position: absolute;

       top:200px;

       right: -100px;

       transform: rotate(270deg) rotateX(-90deg);

       background: url( ../image/G.png) repeat-x center;

       background-size: cover;

}

.ba{

       position: absolute;

       top:0px;

       left:0px;

       transform: rotate(315deg) rotateX(-90deg);

       background: url( ../image/H.png) repeat-x center;

       background-size: cover;

}

.zhuan i.me,.zhuan i.do{

       display: block;

       width: 200px;

       height: 200px;

       position: absolute;

       top: 200px;

       left: 200px;

       transform: rotateX(-90deg) translateY(-200px);

}

.zhuan i.do{

       transform: rotateX(-90deg) translateY(-200px) rotateY(90deg);

}

.me div.left,.me div.right,.do div.left,.do div.right{

       width: 100px;

       height: 160px;

       border: 1px solid #FF0004;

       background: #FF0004;

       animation: bie 3s infinite;

}

.me div.left,.do div.left{

       border-radius:100px 100px 0 0;

       transform: rotate(-45deg) translate(19px,22px);

}

.me div.right,.do div.right{

       border-radius: 100px 100px 0 0;

       transform: rotate(45deg) translate(-63px,-164px);

}

.www{

       width: 400px;

       height: 1080px;

}

.www div{

       margin-top: 60px;

       width: 384px;

       height: 216px;

}

.qw{

       float: right;

       margin-left: 400px;

}

.qe{

       margin-right: 400px;

       float: left;

}

.zx{

       background: url(../image/10.PNG) ;

       background-size: cover;

       transform:rotate(-10deg);

       margin-left: 100px;

}

.zc{

       background: url( ../image/38.PNG) ;

       background-size: cover;

       transform:rotate(-15deg);

       margin-left: 50px;

}

.zv{

       background: url( ../image/43.PNG) ;

       background-size: cover;

       transform:rotate(-20deg);

}

.as{

       background: url( ../image/8.PNG) ;

       background-size: cover;

       transform:rotate(10deg);

       margin-right: 100px;

}

.ad{

       background: url( ../image/20.PNG) ;

       background-size: cover;

       transform:rotate(15deg);

       margin-right: 50px;

}

.af{

       background: url( ../image/2.PNG);

       background-size: cover;

       transform:rotate(20deg);

}

@keyframes hen{

0%{

              transform: rotate(0);

       }

12.5%{

              transform: rotate(45deg);

       }

25%{

              transform: rotate(90deg);

       }

37.5%{

              transform: rotate(135deg);

       }

50%{

              transform: rotate(180deg);

       }

62.5%{

              transform: rotate(225deg);

       }

75%{

              transform: rotate(270deg);

       }

87.5%{

              transform: rotate(315deg);

       }

100%{

              transform: rotate(360deg);

       }

}

@keyframes li{

       0%{

              box-shadow: 0 0 50px #A100FF;//box-shadow设置阴影

       }

 50%{

              box-shadow: 0 0 100px #FF24C0;

       }

       100%{

              box-shadow: 0 0 50px #A100FF

       }

}

@keyframes bie{

       0%{

              box-shadow: 0 0 100px #FF0004;

       }

 50%{

              box-shadow: 0 0 200px #FF0004;

       }

       100%{

              box-shadow: 0 0 100px #FF0004;

       }

}

下面就是效果

谁为谁丶执念
关注
旋转的css动画效果
weixin_68658847的博客
02-03 159
旋转的css动画效果
Html5+CSS3实现3D旋转效果
04-16
Html5+js+CSS3实现3D旋转效果
css3 3D旋转特效
fisher
10-09 1812
最近自己的网站正在制作，由于是个人网站，所以我傲娇的抛弃了IE，痛快的用起了css3和html5的诸多特效，然而问题亦随之而来。这篇文章的主要讲解在使用css3的3D旋转的时候遇到的文章，错误之处，还望各位看官老爷评论中指出。 3D旋转，难点在与其处在一个三维的空间中，我们需要发挥一下空间想象力在头脑中构建它的结构，同时，它的坐标系是随着所做的3D变化而改变的，所以在进行变换的过程中，不同变换动
css3实现旋转过渡动画效果
最新发布
2301_79038994的博客
08-08 412
css3实现旋转过渡动画效果 animation和@keyframes的简单使用
CSS3 3D旋转立方体
weixin_30512089的博客
10-19 173
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <meta name="viewport" content="initial-scale=1.0,m...
css动画效果（旋转+动画）
qq_wxq的博客
05-03 1693
css旋转（动起来吧 ~ ~ ~ ~ ） 欢迎使用Markdown编辑器 你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章，了解一下Markdown的基本语法知识。 新的改变 我们对Markdown编辑器进行了一些功能拓展与语法支持，除了标准的Markdown编辑器功能，我们增加了如下几点新功能，帮助你用它写博客：...
css3实现3d旋转动画特效
09-25
在3D旋转动画特效中，CSS3允许开发者通过定义keyframes（关键帧）动画和使用3D转换属性（如rotateX、rotateY、rotateZ等）来实现复杂的动画效果。通过改变这些属性的值，元素可以被绕不同的轴进行旋转。 本篇文档...
轻量级CSS3立体式3D旋转动画效果特效代码
03-20
在本文中，我们将深入探讨如何实现“轻量级CSS3立体式3D旋转动画效果特效代码”。CSS3作为现代网页设计的重要工具，提供了丰富的样式和动态效果，其中3D旋转功能使得网页元素能够呈现出生动的视觉体验。这个特效在...
3D效果CSS柱状图动画特效
06-24
这里我们要探讨的是如何利用CSS3实现3D效果的柱状图动画特效，这在数据可视化、统计报告以及网页设计中非常常见。"3D效果CSS柱状图动画特效"是一个全屏个性化的设计，能够吸引用户的注意力，为数据展示带来生动有趣...
CSS3爱心文字3D旋转动画特效
06-24
在本文中，我们将深入探讨如何使用CSS3来创建一个具有3D旋转动画特效的爱心文字，这正是"CSS3爱心文字3D旋转动画特效"所涉及的核心知识点。这个特效非常适合在情人节这样的特殊场合使用，为表达爱意增添一份浪漫与...
CSS中的3D旋转
m0_56232007的博客
06-09 7318
一、3D旋转 格式： transform：rotateX（旋转角度） transform：rotateY（旋转角度） transform：rotateZ（旋转角度） transform：rotate3d（1,1,1,deg） 指定对象的3D旋转角度，其中前3个参数分别表示旋转的方向x,y,z取值为0/1 0表示不旋转 1表示旋转 注意： ***第4个参数表示旋转的角度，参数不允许省略*** 注意： 浏览器默认是2d的，如果
一个CSS3实现的旋转动画效果.rar
07-10
一个CSS3实现的旋转动画效果，打开网页后，可看到一些圆环嵌套在一起，循环旋转效果，基于HTML5的CSS3动画技术渲染，对您学习CSS3技术或许会有不小的帮助。
CSS3实现酷炫的3D旋转透视效果
11-21
CSS3实现酷炫的3D旋转透视 3D动画效果现在越来越普及，已经被广泛的应用到了各个平台，比如阿里云，华为云，webpack官网等。它可以更接近于真实的展示我们的产品和介绍，带来极强的视觉冲击感。所以说，为了让自己更加优秀，css3 3D动画必不可少。 你将学到 CSS3 3D 转换的常用API介绍 CSS3 3D 应用场景 CSS3 3D 实现一个立方体   开始 1.CSS3 3D 转换的常用API介绍 首先先上一张css 3D的坐标系：   接下来我们来介绍几个常用的api： 旋转 rotateX() rotateY() rotat
CSS:3d旋转
yiXin_Chen的博客
12-25 331
3d旋转: 属性和值: transform-style: preserve-3d 示例: @keyframes view{ 0% { transform : rotateZ (0deg); } 100%{ transform : rotateZ (360deg) ; } } #img{ transform-style: preserve-3d; animation: view 7s linear infinite; ...
css3三D旋转
qq_43665021的博客
04-02 268
直接上代码 ![在这里插入图片描述](https://img-blog.csdnimg.cn/20190402231041937.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjY1MDIx,size...
使用CSS3实现酷炫的3D旋转视图
2401_84097658的博客
05-07 1038
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！
css 实现三维立体旋转效果
weixin_38881784的博客
04-28 4895
css实现三维立体旋转效果
Css动画效果旋转图片
weixin_67107650的博客
04-17 6819
这次给大家讲解一个有趣的css动画效果哈，那就是旋转图片成一朵花型。 第一步依旧是把img标签敲出来然后把图片放上去。 2.然后开始敲打css样式和效果，先给个class设置一下样式加个定位，因为动画效果需要个定 位才能有效果显示出来。 3.然后也把图片的样式设置一下。 4.最后开始设置图片的动画效果哈，分别把六张图片的位移位置敲打出来，因为我这里是设置 六张，所有刚刚好360°一圈。 ...
css3 3d旋转风车效果
u012350560的博客
08-19 407
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <t...
CSS3实现登录面板3D旋转效果
"这篇教程介绍了如何使用CSS3实现登录面板的3D旋转效果，通过点击登录按钮，面板会进行360度旋转并显示更多信息。文章提供了具体的代码示例，帮助开发者了解和学习这一特效的实现方法。" 在网页设计中，CSS3引入了...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值