css3 2d变换
属性:
transform:向元素应用 2D 或 3D 转换
transform: rotateX() rotateY() rotateZ()
transform-origin:允许你改变被转换元素的位置
(three-value syntax)
transform-style:规定被嵌套元素如何在 3D 空间中显示
perspective:规定 3D 元素的透视效果
perspective-origin:规定 3D 元素的底部位置
backface-visibility:定义元素在不面对屏幕时是否可见
注意:如果不加3d效果 则会默认呈现出2d效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
background-color: black;
}
.cointer{
width: 300px;
height: 450px;
/* border: solid 2px red; */
position: relative;
margin: 200px auto;
/* background-color: black; */
}
.cointer img{
width: 300px;
height: 450px;
position: absolute;
transform-origin: bottom center;
transition: all 1.5s;
box-shadow: 0 0 2px ;
/* left: ; */
}
.cointer:hover img:nth-child(1){
transform: rotate(-60deg);
}
.cointer:hover img:nth-child(2){
transform: rotate(-50deg);
}
.cointer:hover img:nth-child(3){
transform: rotate(-40deg);
}
.cointer:hover img:nth-child(4){
transform: rotate(-30deg);
}
.cointer:hover img:nth-child(5){
transform: rotate(-20deg);
}
.cointer:hover img:nth-child(6){
transform: rotate(-10deg);
}
/* 右边扑克牌距离 */
.cointer:hover img:nth-child(8){
transform: rotate(10deg);
}
.cointer:hover img:nth-child(9){
transform: rotate(20deg);
}
.cointer:hover img:nth-child(10){
transform: rotate(30deg);
}
.cointer:hover img:nth-child(11){
transform: rotate(40deg);
}
.cointer:hover img:nth-child(12){
transform: rotate(50deg);
}
.cointer:hover img:nth-child(13){
transform: rotate(60deg);
}
</style>
</head>
<body>
<div class="cointer">
<img src="imgs/pk1.png" alt="">
<img src="imgs/pk1.png" alt="">
<img src="imgs/pk1.png" alt="">
<img src="imgs/pk1.png" alt="">
<img src="imgs/pk1.png" alt="">
<img src="imgs/pk1.png" alt="">
<img src="imgs/pk1.png" alt="">
<img src="imgs/pk1.png" alt="">
<img src="imgs/pk1.png" alt="">
<img src="imgs/pk1.png" alt="">
<img src="imgs/pk1.png" alt="">
<img src="imgs/pk1.png" alt="">
<img src="imgs/pk1.png" alt="">
</div>
</body>
</html>