知识储备
-
transition: transform 10s;
过度的变形时间为10s
transform-style: preserve-3d;
变形的样式是3d变化 -
relative和absolute：相对定位和绝对定位
relative相对于原来文本框进行定位，定位后原来的空间不删除；
absolute相对于整个页面进行定位，定位后原来的空间删除。 -
:nth-of-type(n) 选择器匹配属于父元素的特定类型的第 N 个子元素的每个元素.
n 可以是数字、关键词或公式。 -
rotateX() 方法
通过 rotateX() 方法，元素围绕其 X 轴以给定的度数进行旋转。 -
translateZ(z) 定义 3D 转换，只是用 Z 轴的值。
实现效果
让四张图片进行空间旋转，实现3d的动画效果。
程序代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#block{
position: relative;
width: 300px;
height: 300px;
margin:200px;
transform-style:preserve-3d;
transition: transform 10s;
}
#block img{
position: absolute;
left: 0px;
top: 0px;
}
img:nth-of-type(1){
transform: rotateX(0deg) translateZ(100px);
}
img:nth-of-type(2){
transform: rotateX(-90deg) translateZ(100px);
}
img:nth-of-type(3){
transform: rotateX(-180deg) translateZ(100px);
}
img:nth-of-type(4){
transform: rotateX(-270deg) translateZ(100px);
}
div:hover{
transform: rotateX(360deg);
}
</style>
</head>
<body>
<div id="block">
<img src="../img/u=1877749382,1683878277&fm=111&gp=0.jpg" />
<img src="../img/复制1 u=1877749382,1683878277&fm=111&gp=0.jpg" />
<img src="../img/复制2 u=1877749382,1683878277&fm=111&gp=0.jpg" />
<img src="../img/复制3 u=1877749382,1683878277&fm=111&gp=0.jpg" />
</div>
</body>
</html>
学习就是为了满足内心深处最基本的渴望，为我们平淡无奇的生活增加一丝乐趣。