html中css3之3d基本知识点 完成一个立方体的并且让其旋转
程序员文章站
2022-07-12 23:33:04
...
1.开启该盒子的3d视图，让其内部的子级进行3d变化时，可见
transform-style: preserve-3d;
2.设置观察者距离：设置了观察者和变形盒子之间的距离，盒子在沿z轴变化时，将在设置的距离上按照近大远小的规律变化
perspective: 500px;
3.设置3d观察者的角度
perspective-origin：center center （中心）
perspective-origin：left top （左上角）
perspective-origin：100% 100% （右下角）
4.3d旋转时 默认的旋转值是360deg 在使用时，如果需要多个状态之间的切换，每个状态的属性
值要一一对应 在变形当中每个盒子都有自己的坐标系，与浏览器无关，X轴永远代表
盒子宽度方向，y轴永远代表盒子的高度方向，z轴永远垂直于盒子宽度和高度构成的平面
完成一个立方体并且让其旋转
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.wrap{
width: 200px;
height: 200px;
/*border: 1px solid blue;*/
position: relative;
margin: 300px auto;
transform-style: preserve-3d;
transform: rotateX(45deg) rotateY(45deg);
}
.wrap>.box{
position: absolute;
top: 0;
left: 0;
text-align: center;
line-height: 200px;
width: 100%;
height: 100%;
color: white;
background: red;
opacity: 0.5;
font-size: 50px;
transition: 1s;
box-shadow: 0px 0px 100px #FFFF66;
border-radius: 20px;
}
body{
background: black;
}
.wrap>.box:nth-child(1){
background: green;
/*transform: rotateX(90deg) translateZ(100px);*/
transition-delay: 0s;
}
.wrap>.box:nth-child(2){
background: yellow;
/*transform: rotateX(90deg) translateZ(-100px);*/
transition-delay: 1s;
}
.wrap>.box:nth-child(3){
background: blue;
/*transform: rotateY(90deg) translateZ(-100px);*/
transition-delay: 2s;
}
.wrap>.box:nth-child(4){
background: pink;
/*transform: rotateY(90deg) translateZ(100px);*/
transition-delay: 3s;
}
.wrap>.box:nth-child(5){
background: pink;
/*transform: translateZ(100px);*/
transition-delay: 4s;
}
.wrap>.box:nth-child(6){
background: pink;
/*transform: translateZ(-100px);*/
transition-delay: 5s;
}
.wrap:hover .box:nth-child(1){
background: green;
transform: rotateX(90deg) translateZ(100px);
}
.wrap:hover .box:nth-child(2){
background: yellow;
transform: rotateX(90deg) translateZ(-100px);
}
.wrap:hover .box:nth-child(3){
background: blue;
transform: rotateY(90deg) translateZ(-100px);
}
.wrap:hover .box:nth-child(4){
background: pink;
transform: rotateY(90deg) translateZ(100px);
}
.wrap:hover .box:nth-child(5){
background: pink;
transform: translateZ(100px);
}
.wrap:hover .box:nth-child(6){
background: pink;
transform: translateZ(-100px);
}
.wrap:hover{
transform: rotateX(3600deg) rotateY(3600deg);
transition: 100s 6s ;
}
img{
width: 100%;
height: 100%;
object-fit: cover;
}
</style>
</head>
<body>
<div class="wrap">
<div class="box">
<img src="./1.jpeg" alt="">
</div>
<div class="box">
<img src="./2.jpeg" alt="">
</div>
<div class="box">
<img src="./3.jpeg" alt="">
</div>
<div class="box">
<img src="./4.jpeg" alt="">
</div>
<div class="box">
<img src="./5.jpeg" alt="">
</div>
<div class="box">
<img src="./6.jpeg" alt="">
</div>
</div>
</body>
</html>下一篇： HW8 粒子系统与流动效果