前端CSS3--之3D旋转
本帖最后由 clearwater 于 2020-2-8 13:13 编辑请水神和毒舌绕路走。
以下只是我跟某前端视频教程的练习。
请教，当我把鼠标放在box上，为什么紫色的面不可见？
除非我把紫色的盒子的背面转为180度？（见第41行，被我注释掉的。如果我取消注释，鼠标不经过box, 是粉红色；鼠标经过是紫色，这是我想在的效果。）
CSS3的默认属性是背面可见。假如我拿两个手机A, 手机B的正面叠在一起，然后沿着Y轴旋转180度。现实中只能看到手机B的背面，但是3D中如果不取消默认属性，转180度看到的依然是手机B的正面，不是吗？
以下链接是可以在线看到效果的代码。和本帖的代码一样。哪个方便，你们看哪一个。
https://codepen.io/iwater/pen/MWwgWjP
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
body {
perspective: 500px;
}
.box {
position: relative;
width: 300px;
height: 300px;
margin: 100px auto;
transform-style: preserve-3d;
transition: all .6s;
}
.front,
.back {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 50%;
text-align: center;
line-height: 300px;
font-size: 30px;
color: #fff;
}
.front {
background-color: pink;
z-index: 1;
}
.back {
background-color: purple;
/* transform: rotateY(180deg); */
}
.box:hover{
transform: rotateY(180deg);
}
</style>
</head>
<body>
<div class="box">
<div class="front">hello world</div>
<div class="back">I'm here.</div>
</div>
</body>
</html> 学习了,感谢 本帖最后由 clearwater 于 2020-2-4 10:11 编辑
fallerL 发表于 2020-2-4 10:06
学习了,感谢
大哥，别来灌水。
主帖的第一行，我都注明了。 你不把紫色盒子旋转的话，那么posi:决定定位两个子盒子，两个子盒子默认是叠在一起的，而且后面的会层叠掉第一个盒子(看不到第一个盒子,但是是在一起的)。
今晚不熬夜_ 发表于 2020-2-4 11:03
你不把紫色盒子旋转的话，那么posi:决定定位两个子盒子，两个子盒子默认是叠在一起的，而且后面的会层叠掉 ...
谢谢指教。
定位的话，只是把两个子盒子，粉色和紫色都层叠在一起。（前粉，后紫）
我转动的是两个子盒子的父盒子.box, 我没想明白为什么会层叠掉？
您拿两本书放一起，都是封面朝前。然后两本书一起沿Y轴转180，看到的应该是第二本书的背面才对。
{:1_904:} clearwater 发表于 2020-2-4 11:13
谢谢指教。
定位的话，只是把两个子盒子，粉色和紫色都层叠在一起。（前粉，后紫）
层叠在一起，相当于合在一起，你只能看到粉色的了，你没用谷歌调试吗？
(调试父盒子的transform: rotateY( ) )
层叠在一起不是分在前后面的 clearwater 发表于 2020-2-4 11:13
谢谢指教。
定位的话，只是把两个子盒子，粉色和紫色都层叠在一起。（前粉，后紫）
https://imgchr.com/i/1B3qaV clearwater 发表于 2020-2-4 11:13
谢谢指教。
定位的话，只是把两个子盒子，粉色和紫色都层叠在一起。（前粉，后紫）
https://s2.ax1x.com/2020/02/04/1B3qaV.gif 今晚不熬夜_ 发表于 2020-2-4 11:34
不好意思，点错了，扣了您一个币，给您补2个CB 今晚不熬夜_ 发表于 2020-2-4 11:34
那为什么我紫盒子转了一个方向，紫盒子就不会被叠加掉？
转了一个方向，紫盒子还是在box里面啊？
请有空时，再指点。
（说不定您要去吃饭了。我不着急）
页:
[1]
2