分享一个web旋转正方体动画及源码

最新推荐文章于 2022-04-25 18:58:59 发布

易。安

最新推荐文章于 2022-04-25 18:58:59 发布

阅读量909

点赞数

文章标签： html css3

本文链接：https://blog.csdn.net/qq_45126286/article/details/105612967

版权

关于html实现3D旋转正方体的效果还是有很多教程的，这里分享一个源代码，注意图片尺寸保持一致，文件路径正确。代码注释还是比较多的，主要包括html和css，如下：

<!doctype html>
<html lang="en">
 <!--网页头部信息-->
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="123">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>index（旋转正方体）</title>
  <link href="images/6.jpg" rel="icon"><!--logo-->
  <!--css 层叠样式 -->
  <style>
	.bigbox{
   
			margin:100px auto;
			position: relative;
			width: 400px;/*宽400px*/
			height: 400px;/*高：400px*/
			/*background-color: skyblue;*/
	}
	.smallbox{
   
			position: absolute;
			left:0;
			top:0;
			right:0;
			bottom:0;
			margin: auto;
			width: 200px;/*宽200px*/
			height: 200px;/*高：200px*/
			/*background-color: red;*/
			/*开启3D动画*/
			transform-style:preserve-3d;
			/*动画名字 动画时间 动画速度 动画循环*/
			animation:move 5s linear infinite;
	}
		.smallbox div{
   
		position: absolute;
		width: 100% ; /*继承父级元素宽*/
		height: 100%;
	}/*继承*/
	.smallbox div

最低0.47元/天解锁文章

易。安

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
分享一个web旋转正方体动画及源码

关于html实现3D旋转正方体的效果还是有很多教程的，这里分享一个源代码，注意图片尺寸保持一致，文件路径正确。代码注释还是比较多的，主要包括html和css，如下：<!doctype html><html lang="en">  <head> <meta charset="UTF-8"> <...
复制链接

扫一扫