效果:
仅仅需要:
#a{
perspective: 3000px;
}
img{
transform: scale3d(0.5,0.5,2.5) rotateX(45deg);
}
然后再在img里加入边框即可:
img{
width: 500px;
height: 500px;
border: 5px solid red;
transform: scale3d(0.5,0.5,2.5) rotateX(45deg);
}
index.html<!DOCTYPE html>
<html>
<head>
<title>css3变形效果[下]</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
11
<div id="a">
<img src="1.png">
</div>
</body>
</html>
style.css
@charset "utf-8";
body{
margin:100px;
}
#a{
perspective: 3000px;
/*perspective-origin: top right;*/
/*transform-style: preserve-3d;*/
}
img{
width: 500px;
height: 500px;
border: 5px solid red;
/*transform: translate3d(100px,100px,100px);*/
/*transform: translateZ(500px);*/
transform: scale3d(0.5,0.5,2.5) rotateX(45deg);
/*transform: scaleZ(1.5) rotateX(45deg);*/
/*transform: rotate3d(0,1,0,70deg);*/
/*transform:perspective(500px); rotateY(45deg);*/
}