2021-07-21

最新推荐文章于 2021-07-29 21:37:06 发布

m0_60354811

最新推荐文章于 2021-07-29 21:37:06 发布

阅读量53

点赞数

本文链接：https://blog.csdn.net/m0_60354811/article/details/118968183

版权

这篇博客记录了作者学习CSS最后一部分——动画的内容，通过跟随视频教程制作了一个3D魔方作业。作者利用CSS的transform属性和关键帧动画（@keyframes）实现了魔方的旋转效果，创建了包括顶面、底面、左面、右面、前面和后面六个面的3D立方体。博客中展示了HTML和CSS代码，用于构建和动画化魔方。

摘要由CSDN通过智能技术生成

今天上午学习了css的最后一部分内容：动画，看到视频中的老师有展示一个魔方作业，并做出了一些演示跟讲解，下午的时候自己尝试着做了一下。

!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
       <style type="text/css">
           *{
margin:0;
padding:0;
}
div{
width: 300px;
height: 300px;
position: absolute;
text-align: center;
line-height: 300px;
animation:mymove 5s ;
}
body{
transform-style: preserve-3d；
height: 700px;
animation: fram1 10s ease;
width: 700px;
display: flex;
justify-content: center;
align-items: center;
}

.top{
background-color:aqua;
transform:rotateX(90deg) translateZ(150px);

}
.bottom{
background-color:#8A2BE2;
transform:rotateX(-90deg) translateZ(150px);
}
.left{
background-color:#FFEBCD;
transform:rotateY(-90deg) translateZ(150px);
}
.right{
background-color:bisque;
transform:rotateY(90deg) translateZ(150px);

}
.after{
background-color:aquamarine;
transform:rotateY(180deg) translateZ(150px);
}
.before{
background-color:brown;
transform:rotateY(0deg) translateZ(150px);
}
@keyframes fram1{
0%,100%{
transform: rotateY(0deg) rotateX(0deg);
}
50%{
transform: rotateY(180deg) rotateX(180deg)；
}
}
       </style>
   </head>
   <body>
       <div class="top"></div>
<div class="bottom"></div>
<div class="left"></div>
<div class="right"></div>
<div class="after"></div>
<div class="before"></div>
   </body>
</html>

m0_60354811

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2021-07-21

今天上午学习了css的最后一部分内容：动画，看到视频中的老师有展示一个魔方作业，并做出了一些演示跟讲解，下午的时候自己尝试着做了一下。!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin:0;...
复制链接

扫一扫