实例介绍
【实例简介】
html、css3动画3D旋转立方体
【实例截图】本实例使用了引用线上jq
【核心代码】
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- jQuery引用 -->
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.5.1.min.js"></script>
<title>3D正方体</title>
<style>
* {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
color: black;
}
body {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
background: linear-gradient(to right, rgb(10, 139, 129), rgb(19, 43, 151));
}
.container {
height: 500px;
width: 500px;
display: flex;
justify-content: center;
align-items: center;
position: relative;
/* transform: rotate3d(1, 1, 0, -30deg); */
transform-style: preserve-3d;
/* 设置元素被查看位置视图 */
perspective: 0px;
/* 设置3D元素基点位置 */
perspective-origin: 0px 0px;
margin-top: 200px;
}
.front,
.back,
.top,
.bottom,
.left,
.right {
height: 200px;
width: 200px;
position: absolute;
}
.front {
background-color: red;
transform: translateZ(100px);
}
.back {
background-color: yellow;
transform: translateZ(-100px);
}
.left {
background-color: pink;
transform: translateX(-100px) rotateY(-90deg);
}
.right {
background-color: greenyellow;
transform: translateX(100px) rotateY(90deg);
}
.top {
background-color: aqua;
transform: translateY(-100px) rotateX(90deg);
}
.bottom {
background-color: blueviolet;
transform: translateY(100px) rotateX(-90deg);
}
.trantions{
transition: 3s;
}
@keyframes rotate {
form {
transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
}
to {
transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
}
}
/* 内层立方体 */
.container>span {
display: block;
width: 100px;
height: 100px;
position: absolute;
background-color: blue;
transform-style: preserve-3d;
}
.min_front {
background-color: red;
transform: translateZ(50px);
}
.min_back {
background-color: yellow;
transform: translateZ(-50px);
}
.min_left {
background-color: pink;
transform: translateX(-50px) rotateY(-90deg);
}
.min_right {
background-color: greenyellow;
transform: translateX(50px) rotateY(90deg);
}
.min_top {
background-color: aqua;
transform: translateY(-50px) rotateX(90deg);
}
.min_bottom {
background-color: blueviolet;
transform: translateY(50px) rotateX(-90deg);
}
</style>
</head>
<body>
<div class="container">
<!-- 外层立方体 -->
<!-- 前面 -->
<div class="front">front</div>
<!-- 后面 -->
<div class="back">back</div>
<!-- 左面 -->
<div class="left">left</div>
<!-- 右面 -->
<div class="right">right</div>
<!-- 上面 -->
<div class="top">top</div>
<!-- 下面 -->
<div class="bottom">bottom</div>
<!-- 内层立方体 -->
<span class="min_front"></span>
<span class="min_back"></span>
<span class="min_left"></span>
<span class="min_right"></span>
<span class="min_top"></span>
<span class="min_bottom"></span>
</div>
<script>
// 使用jquery获取元素
var con = $('.container')[0];
// 获取父元素下所有子元素
con.addEventListener('mouseover', function (e) {
var div = con.children;
con.style.transform = 'rotate3d(' 1 ',' 1 ',' 0 ',' '-' 30 'deg)'
div[0].style.transform = 'translateZ(' 200 'px)'
div[1].style.transform = 'translateZ(' '-' 200 'px)'
div[2].style.transform = 'translateX(' '-' 200 'px)' 'rotateY(' '-' 90 'deg)'
div[3].style.transform = 'translateX(' 200 'px)' 'rotateY(' 90 'deg)'
div[4].style.transform = 'translateY(' 200 'px)' 'rotateX(' '-' 90 'deg)'
div[5].style.transform = 'translateY(' '-' 200 'px)' 'rotateX(' 90 'deg)'
con.style.animation = 'rotate 30s infinite alternate linear'
})
</script>
</body>
</html>
小贴士
感谢您为本站写下的评论，您的评论对其它用户来说具有重要的参考价值，所以请认真填写。
- 类似“顶”、“沙发”之类没有营养的文字，对勤劳贡献的楼主来说是令人沮丧的反馈信息。
- 相信您也不想看到一排文字/表情墙，所以请不要反馈意义不大的重复字符，也请尽量不要纯表情的回复。
- 提问之前请再仔细看一遍楼主的说明，或许是您遗漏了。
- 请勿到处挖坑绊人、招贴广告。既占空间让人厌烦，又没人会搭理，于人于己都无利。
关于好例子网
本站旨在为广大IT学习爱好者提供一个非营利性互相学习交流分享平台。本站所有资源都可以被免费获取学习研究。本站资源来自网友分享，对搜索内容的合法性不具有预见性、识别性、控制性，仅供学习研究，请务必在下载后24小时内给予删除，不得用于其他任何用途，否则后果自负。基于互联网的特殊性，平台无法对用户传输的作品、信息、内容的权属或合法性、安全性、合规性、真实性、科学性、完整权、有效性等进行实质审查；无论平台是否已进行审查，用户均应自行承担因其传输的作品、信息、内容而可能或已经产生的侵权或权属纠纷等法律责任。本站所有资源不代表本站的观点或立场，基于网友分享，根据中国法律《信息网络传播权保护条例》第二十二与二十三条之规定，若资源存在侵权或相关问题请联系本站客服人员，点此联系我们。关于更多版权及免责申明参见 版权及免责申明
网友评论
我要评论