3.3D动画过渡

最新推荐文章于 2023-04-10 15:59:15 发布

吃不到的花生仁

最新推荐文章于 2023-04-10 15:59:15 发布

阅读量231

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/xianpo/article/details/91898758

版权

css 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

左手，让拇指和食指成“L”形，大拇指向右，食指向上，中指指向前方。这样我们就建立了一个左手坐标系，拇指、食指和中指分别代表X、Y、Z轴的正方向

CSS3中的3D坐标系与上述的3D坐标系是有一定区别的，相当于其绕着X轴旋转了180度

透视

电脑显示屏是一个2D平面，图像之所以具有立体感（3D效果），其实只是一种视觉呈现，通过透视可以实现此目的。

透视可以将一个2D平面，在转换的过程当中，呈现3D效果。

a) 作为一个属性，设置给父元素，作用于所有3D转换的子元素

b) 作为transform属性的一个值，做用于元素自身

参考博文

https://www.cnblogs.com/mingm/p/6816171.html

/**************************************************************************

<!doctype html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Document</title>
   <style type="text/css">
       body{
            perspective:500px;/**给所有子元素设置视距500px 越小越明显越大越不明显*/
       }
   img{
       width: 200px;
       height: 200px;
       transition: all 1s;
       transform-origin:left;/**设置旋转中心*/

       }
       img:hover{
           /**transform:rotateX(360deg);以x轴中心线位坐标轴旋转360度在 1s内**/
           /**transform:rotateY(360deg);以y轴中心线位坐标轴旋转360度在 1s内**/
           /**transform:rotateZ(360deg);以z轴中心线位坐标轴旋转360度在 1s内物体距屏幕的距离越大我们看到的越近物体越大**/
           transform:translate(100px,100px,200px)/**整合 transform:translate(x,y,z) x，y设置为px % z只能为px*/
       }
   </style>
</head>
<body>
       <img src="./1.png"/>
</body>
</html>

/***************************************翻转*********************************************

<!doctype html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Document</title>
   <style type="text/css">
   body{background: red;}
       div{
           width: 200px;
           height: 200px;
           position: relative;
       }
       div img{
           position: absolute;
           top:0;
           left: 0;
           transition: all 1s;
       }
       div img:first-child{
           z-index: 1;
           backface-visibility:hidden;
       }

       div:hover img{
           transform:rotateY(180deg);

       }

   </style>
</head>
<body>
       <div>
           <img src="./a.jpg" alt="">
           <img src="./b.jpg" alt="">
       </div>
</body>
</html>

吃不到的花生仁

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
3.3D动画过渡

左手，让拇指和食指成“L”形，大拇指向右，食指向上，中指指向前方。这样我们就建立了一个左手坐标系，拇指、食指和中指分别代表X、Y、Z轴的正方向CSS3中的3D坐标系与上述的3D坐标系是有一定区别的，相当于其绕着X轴旋转了180度透视电脑显示屏是一个2D平面，图像之所以具有立体感（3D效果），其实只是一种视觉呈现，通过透视可以实现此目的。透视可以将一个2D平面，在转换的过...
复制链接

扫一扫

专栏目录