<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>3D</title>
<style>
/*优雅降级和渐变增强 都是说浏览器低版本和高版本兼容 取决于用户需求*/
/*x 左边是负的，右边是正的
y 上面是负的，下面是正的
z 里面是负的，外面是正的*/
body{
/*3D立体感，给父亲加*/
perspective: 500px; /*透视，有立体感，一般设置为500px，越小看到的越大*/
}
img{
position: absolute;
top: 0;
left: 0;
transition: all 2s;
}
img:nth-child(1){
backface-visibility:hidden;
}
div:hover img{
/*transform: rotateX(180deg); */
/*transform: rotateZ(180deg); */
transform: rotateY(180deg);
}
/*backface-visibility 当属性不面向屏幕时是否可见*/
/*快捷键: ctrl+shift+上下箭头; 可以整行移动*/
</style>
</head>
<body>
<div><img src="icon3.png" alt=""><img src="icon3.png" alt=""></div>
</body>
</html>
018 3D
猜你喜欢
转载自blog.csdn.net/weixin_40422393/article/details/89287961
今日推荐
周排行