为啥3d魔方不能转？
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>3d魔方</title>
<style>
*{
padding: 0;
height: 0;
}
section{
width:300px;
height: 300px;
margin: 100px auto;
border: 1px solid red;
perspective: 400px;
/* 设置变形类型为3d 保留内部3d效果 */
transform-style: preserve-3d;
}
.bix{
width: 300px;
height: 300px;
perspective: 400px;
position: relative;
}
.bix div{
width: 200px;
height: 200px;
position: absolute;
}
.bix .bi{
/* 前面 */
background-color: red;
transform: translateZ(100px);
}
.bix .bi1{
/* 顶面 */
background-color: green;
transform: rotateX(90deg) translateZ(100px);
}
.bix .bi2{
/* 背面 */
background-color: orange;
transform: rotateX(180deg) translateZ(100px);
}
.bix .bi3{
/* 底面 */
background-color: blue;
transform: rotateX(-90deg) translateZ(100px);
}
.bix .bi4{
/* 左面 */
background-color: yellow;
transform: rotateX(90deg) translateZ(100px);
}
.bix .bi5{
/* 右面 */
background-color: turquoise;
transform: rotateX(-90deg) translateZ(100px);
}
section :hover .bix{
transform:rotateX(360deg) rotateY(360deg);
}
</style>
</head>
<body>
<section>
<div class="bix">
<div class="bi"></div>
<div class="bi1"></div>
<div class="bi2"></div>
<div class="bi3"></div>
<div class="bi4"></div>
<div class="bi5"></div>
</div>
</section>
</body>
</html>
正在回答 回答被采纳积分+1
同学你好，3d魔方无法实现旋转效果，首先是因为同学在给section元素添加hover伪类时，section与:hover之间多了空格，无法触发鼠标移入伪类。其次，同学设置的旋转度数为360deg，如果不添加过渡的话，是看不出旋转效果的，建议参考如下修改：
祝学习愉快！
-
改了还是不行
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>3d魔方</title>
<style>
* {
padding: 0;
height: 0;
}
section {
width: 300px;
height: 300px;
margin: 100px auto;
border: 1px solid red;
perspective: 400px;
/* 设置变形类型为3d 保留内部3d效果 */
transform-style: preserve-3d;
}
.bix {
width: 300px;
height: 300px;
perspective: 400px;
position: relative;
}
.bix div {
width: 200px;
height: 200px;
position: absolute;
transition: transform 10s;
}
.bix .bi {
/* 前面 */
background-color: red;
transform: translateZ(100px);
}
.bix .bi1 {
/* 顶面 */
background-color: green;
transform: rotateX(90deg) translateZ(100px);
}
.bix .bi2 {
/* 背面 */
background-color: orange;
transform: rotateX(180deg) translateZ(100px);
}
.bix .bi3 {
/* 底面 */
background-color: blue;
transform: rotateX(-90deg) translateZ(100px);
}
.bix .bi4 {
/* 左面 */
background-color: yellow;
transform: rotateX(90deg) translateZ(100px);
}
.bix .bi5 {
/* 右面 */
background-color: turquoise;
transform: rotateX(-90deg) translateZ(100px);
}
section:hover .bix {
transform: rotateX(360deg) rotateY(360deg);
}
</style>
</head>
<body>
<section>
<div class="bix">
<div class="bi"></div>
<div class="bi1"></div>
<div class="bi2"></div>
<div class="bi3"></div>
<div class="bi4"></div>
<div class="bi5"></div>
</div>
</section>
</body>
</html>
2021-04-09 18:45:14 -
加上了也不行 是哪里错了么？
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>3d魔方</title>
<style>
* {
padding: 0;
height: 0;
}
section {
width: 300px;
height: 300px;
margin: 100px auto;
border: 1px solid red;
perspective: 400px;
/* 设置变形类型为3d 保留内部3d效果 */
transform-style: preserve-3d;
}
.bix {
width: 300px;
height: 300px;
perspective: 400px;
position: relative;
transition: transform 5s ease;
}
.bix div {
width: 200px;
height: 200px;
position: absolute;
}
.bix .bi {
/* 前面 */
background-color: red;
transform: translateZ(100px);
}
.bix .bi1 {
/* 顶面 */
background-color: green;
transform: rotateX(90deg) translateZ(100px);
}
.bix .bi2 {
/* 背面 */
background-color: orange;
transform: rotateX(180deg) translateZ(100px);
}
.bix .bi3 {
/* 底面 */
background-color: blue;
transform: rotateX(-90deg) translateZ(100px);
}
.bix .bi4 {
/* 左面 */
background-color: yellow;
transform: rotateX(90deg) translateZ(100px);
}
.bix .bi5 {
/* 右面 */
background-color: turquoise;
transform: rotateX(-90deg) translateZ(100px);
}
section:hover.bix {
transform: rotateX(360deg) rotateY(360deg);
}
</style>
</head>
<body>
<section>
<div class="bix">
<div class="bi"></div>
<div class="bi1"></div>
<div class="bi2"></div>
<div class="bi3"></div>
<div class="bi4"></div>
<div class="bi5"></div>
</div>
</section>
</body>
</html>
2021-04-09 21:41:13
相似问题
登录后可查看更多问答，登录/注册
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星