卡片翻转效果实现 以及 transform常用属性详解

最新推荐文章于 2024-07-17 17:48:42 发布
最新推荐文章于 2024-07-17 17:48:42 发布
阅读量1.7k 收藏 3
点赞数
分类专栏： 前端开发
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yexudengzhidao/article/details/103604441
版权

一. 实现思路：

  1. 在一个大的div里放两个div
  2. 把第二个div翻转180度，并设置backface-visibility: hidden;这样就会将第二个div的正面隐藏起来。
  3. 动态添加class，让最外层的大div进行旋转(里面的div也会跟着旋转)，注意:正面与反面是一个相对的概念，在旋转后，子div相对于父div的正面还是反面是不会变的，所以旋转后第一个div还是处于隐藏的状态
实现代码：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>卡片旋转效果</title>
    <style>
        .card-face {
            width: 300px;
            height: 300px;
            border: 1px solid red;
            /* 如果没有这句，翻转过来会不显示 */
            /* transform-style: preserve-3d;  */
            transform-origin: left center;
            transition: transform 1s;

        }
        .card-face-front {
            border: 1px solid yellow;
            width: 100%;
            height: 50px;
            text-align: center;
            font-size: 30px;
            background-color: #f00;

        }
        .card-face-back {
            border: 1px solid blue;
            width: 100%;
            height: 250px;
            transform: rotateY(180deg);
            backface-visibility: hidden;
        }
        .card-rotate {
            transform: translateX(100%) rotateY(-180deg);
        }
        .card-face-back-backface-visble {
            backface-visibility: visible;
        }
        .card-face-back-backface-hidden {
            backface-visibility: hidden;
        }
    </style>

</head>
<body>
   <div class="card-face" onclick="handler();">
        <div class="card-face-front">
            子元素1
        </div>
        <div class="card-face-back">
            子元素2
        </div>
   </div> 
</body>
<script>
    let isRotate = false;
    function handler() {
        let oDiv = document.querySelector('.card-face');
        let oDivChild2 = document.querySelector('.card-face-back');
        // console.log(oDiv);
        isRotate = !isRotate;
        if(isRotate) {
           oDiv.setAttribute('class', 'card-face card-rotate');
        } else {
           oDiv.setAttribute('class', 'card-face');
        }    
    }
</script>
</html>


<!-- 旋转与不旋转，始终是相对父元素的 -->
效果如下：

在这里插入图片描述

显然，上面的效果不是我们想要的。

第一种解决方案：

在旋转过来之后，还需要把第二个div设置成backface-visibility: visible;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>卡片旋转效果</title>
    <style>
        .card-face {
            width: 300px;
            height: 300px;
            border: 1px solid red;
            /* 如果没有这句，翻转过来会不显示 */
            /* transform-style: preserve-3d;  */
            transform-origin: left center;
            transition: transform 1s;

        }
        .card-face-front {
            border: 1px solid yellow;
            width: 100%;
            height: 50px;
            text-align: center;
            font-size: 30px;
            background-color: #f00;

        }
        .card-face-back {
            border: 1px solid blue;
            width: 100%;
            height: 250px;
            transform: rotateY(180deg);
            backface-visibility: hidden;
        }
        .card-rotate {
            transform: translateX(100%) rotateY(-180deg);
        }
        .card-face-back-backface-visble {
            backface-visibility: visible;
        }
        .card-face-back-backface-hidden {
            backface-visibility: hidden;
        }
    </style>

</head>
<body>
   <div class="card-face" onclick="handler();">
        <div class="card-face-front">
            子元素1
        </div>
        <div class="card-face-back">
            子元素2
        </div>
   </div> 
</body>
<script>
    function handler() {
        let oDiv = document.querySelector('.card-face');
        let oDivChild2 = document.querySelector('.card-face-back');
        console.log(oDiv);
        if(oDiv.classList.length>1) {
            oDiv.setAttribute('class', 'card-face');
            oDivChild2.setAttribute('class', 'card-face-back card-face-back-backface-hidden')
        } else {
            oDiv.setAttribute('class', 'card-face card-rotate')
            oDivChild2.setAttribute('class', 'card-face-back card-face-back-backface-visble')
        }
        
    }
</script>
</html>


<!-- 旋转与不旋转，始终是相对父元素的 -->
效果如下：

在这里插入图片描述

第二种解决方案(对于有过度效果最好的方案)：

在父元素上开启transform-style: preserve-3d;这个属性的作用是设置元素的子元素是位于 3D 空间中还是平面中，如果位于3D中间中，那么就会多出一个Z轴来，也就是朝屏幕的方向，那么隐藏的也会被看到！！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>卡片旋转效果</title>
    <style>
        .card-face {
            width: 300px;
            height: 300px;
            border: 1px solid red;
            /* 如果没有这句，翻转过来会不显示 */
            transform-style: preserve-3d; 
            transform-origin: left center;
            transition: transform 1s;

        }
        .card-face-front {
            border: 1px solid yellow;
            width: 100%;
            height: 50px;
            text-align: center;
            font-size: 30px;
            background-color: #f00;

        }
        .card-face-back {
            border: 1px solid blue;
            width: 100%;
            height: 250px;
            transform: rotateY(180deg);
            backface-visibility: hidden;
        }
        .card-rotate {
            transform: translateX(100%) rotateY(-180deg);
        }
        .card-face-back-backface-visble {
            backface-visibility: visible;
        }
        .card-face-back-backface-hidden {
            backface-visibility: hidden;
        }
    </style>

</head>
<body>
   <div class="card-face" onclick="handler();">
        <div class="card-face-front">
            子元素1
        </div>
        <div class="card-face-back">
            子元素2
        </div>
   </div> 
</body>
<script>
    let isRotate = false;
    function handler() {
        let oDiv = document.querySelector('.card-face');
        // let oDivChild2 = document.querySelector('.card-face-back');
        // console.log(oDiv);
        isRotate = !isRotate;
        if(isRotate) {
           oDiv.setAttribute('class', 'card-face card-rotate');
        //    oDivChild2.setAttribute('class', 'card-face-back card-face-back-backface-visble')

        } else {
           oDiv.setAttribute('class', 'card-face');
        //    oDivChild2.setAttribute('class', 'card-face-back card-face-back-backface-hidden')

        }
    }
</script>
</html>


<!-- 旋转与不旋转，始终是相对父元素的 -->
效果如下：

在这里插入图片描述

在这里插入图片描述

二. 补充知识点：

2.1 transform-origin

设置旋转元素的基点位置：

  1. 默认值为：transform-origin: 50% 50% 0

  2. 注意x轴是left,center,right 和 y轴是top,center,bottom
    在这里插入图片描述

  3. 如果是rotateX() 或 rotateY() ，则按当前点所在的x轴或者y轴进行旋转。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        #div1
        {
            position: relative;
            height: 200px;
            width: 200px;
            margin: 100px;

            border: 1px solid black;
        }

        #div2
        {
            padding:50px;
            position: absolute;
            border: 1px solid black;
            background-color: yellow;
        }
        #div2:hover {
            transition: transform 2s;
            transform: rotateX(180deg); /*按轴旋转*/
            /*transform: rotate(180deg);*/  /*按点旋转*/
            transform-origin: 0 0;

        }
    </style>
</head>
<body>
    <div id="div1">
        <div id="div2">HELLO</div>
    </div>
</body>
</html>
2.2 transform-style: preserve-3d;

CSS 属性 transform-style 设置元素的子元素是位于 3D 空间中还是平面中，默认为transform-style: flat;

在这里插入图片描述

2.3 backface-visibility

隐藏被旋转的 div 元素的背面：注意：正面还是反面都是相对其父元素说的！！！

在这里插入图片描述

2.4 平移与旋转

  1. transform: translateX(100%); 向右移动自身长度的距离。

  2. transform: translateX(-100%); 向左移动自身长度的距离。

  3. transform: rotateY(90deg); 顺时针绕Y轴旋转90度。

  4. transform: rotateY(-90deg); 逆时针绕Y轴旋转90度。

  5. transform: translate(100%); 向右下方移动。

  6. transform: rotate(90deg); 在平面上旋转。

2.5 rotate()旋转角度/顺逆时针问题

理论上都应是让各轴的正向(X轴向右、Y轴向下、Z轴面向自己)指向自己，顺时针(正角度值)/逆时针(负角度值)转。

但rotate()、rotateZ()，会采用就近转到目标角度原则：

  1. 小于180°，正常顺时针，但大于180°就要注意：例设值200deg，会逆时针转160度完事；
  2. 设180°会逆时针转，-180°才顺时针；
  3. 设360°的倍数值压根转都不转。

而rotateX() 、 rotateY()这两个，还是会老老实实的转，一度不少，正值顺、负值逆。

. . . . .
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
深入理解transform属性之翻转效果
黄沙百战穿金甲，不破楼兰终不还。
03-12 5774
纯CSS3实现<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> a { display: block; float: left;
Transform变换
hp0524chl的博客
10-19 542
而且它还可以使用方便的RenderTransformOrigin属性值，从而可以为特定的变换（如旋转）使用相对坐标。包括属性ScaleX、ScaleY、CenterX、CenterY，其中ScaleX、ScaleY属性表示对象在。包含X、Y 两种属性，以原来的对象为坐标原点(0,0),然后向X轴、Y轴进行平移变换。X、Y轴进行缩放的倍数，使用CenterX 和 CenterY属性指定一个中心点。变形元素包括平移变形、旋转变形、缩放变形、扭曲变形、矩阵变形和组合变形元素，
CSS3实现漂亮的卡片翻转效果
04-08
纯CSS3实现的漂亮卡片翻转效果，包含完整的图片资源，解压即可在浏览器使用，简单方便，兼容性好！2020.06.22更新降低下载积分需求，我个人原意是免费下载的，奈何网站规则不允许！
Web开发：卡片翻转效果（HTML、CSS）
最新发布
m0_65029152的博客
07-17 910
本文主要记录，前端实现卡片翻转效果的过程和相关内容；
CSS【详解】变换 transform（含位移 translate，缩放/翻转 scale，旋转 rotate，CSS 的角度单位，斜切skew，透视 perspective，变换类型和原点等）
朝阳39的博客
07-10 1164
变换是缩放、位移、旋转、透视、斜切等的总称。
css 卡片翻转效果,CSS如何实现卡片3D翻转效果
weixin_39942726的博客
08-04 2753
本文主要和大家介绍了CSS实现卡片3D翻转效果的示例代码，希望能帮助到大家。效果：代码：html：css：.main {position: absolute;top: 50%;left: 50%;width: 300px;height: 300px;transform: translate(-50%,-50%);-webkit-perspective: 1500;-moz-perspective:...
transform属性实现翻转效果
weixin_30348519的博客
09-22 641
transform:perspective(800px) rotateY(180deg);//翻转180度，透视800px; transition-delay: 0.3s;//过程时间 opacity: 1;//配合透明度更好:hover{} 产生过程效果 转载于:https://www.cnblogs.com/Neilisme/p/7574896.html...
vue3实现鼠标点击卡片翻转效果
hsyq586的博客
11-17 1156
当点击该按钮时，会调用flipAllCards方法，遍历cards数组，并将每个卡片的flipped属性取反，从而实现全部卡片同时翻转，并且在flipAllCards 方法中添加逻辑来检查卡片的当前状态，如果已经是反面，则不进行翻转。每个卡片都有front和back两个面，初始状态下都是正面（flipped: false）。通过点击卡片，我们可以改变对应卡片的flipped属性，从而实现翻转动画。使用v-bind:class指令来动态切换卡片的类名，根据flipped属性的值来决定显示正面还是反面的内容。
花里胡哨的3D翻页卡片，隔壁产品都馋哭了，retrofit教程
qd520_1314的博客
03-22 746
android中的matrix是一个3*3的矩阵，如下图scale控制缩放，skew控制错切，trans控制位移，persp控制透视，值得注意的是，旋转操作是通过scale和skew共同作用完成的。android中matix的封装非常完善，使用者无需再去重拾体育老师教授的数学知识，直接调用。这里指的是android.graphics包下的Camera，用于计算3D变换。封装得同样十分完善，使用者无需再用屁股思考控件坐标计算过程，直接调用，同时搭配好对应的matrix。
【一步教学，一步到位】花里胡哨的3D翻页卡片，隔壁产品都馋哭
jiameih的博客
04-05 911
我见过很多技术leader在面试的时候，遇到处于迷茫期的大龄程序员，比面试官年龄都大。这些人有一些共同特征：可能工作了5、6年，还是每天重复给业务部门写代码，工作内容的重复性比较高，没有什么技术含量的工作。问到这些人的职业规划时，他们也没有太多想法。其实30岁到40岁是一个人职业发展的黄金阶段，一定要在业务范围内的扩张，技术广度和深度提升上有自己的计划，才有助于在职业发展上有持续的发展路径，而不至于停滞不前。不断奔跑，你就知道学习的意义所在！本文已被。
如何利用css实现div卡片翻转
weixin_44054563的博客
07-21 1706
实现效果：本文是在画前端页面时遇到的一个css样式问题的记录，如有错误的地方，请多多指正~我会继续努力加油~~
react-ReactFlippy允许您在React项目中创建翻转卡片
08-14
React-Flippy允许您在React项目中创建翻转卡片。 它可以用作受控或不受控制的组件。
使用transform制作书本翻页效果
苦作舟的空城机
11-06 1483
transform transform属于CSS属性 Transform属性应用于元素的2D或3D转换。这个属性允许你将元素旋转，缩放，移动，倾斜等。 在网页中需要制作一些有立体感的3d效果，比如书本翻页 tansform中有一个rotate旋转属性 属性 功能 rotate(angle) 定义 2D 旋转，在参数中规定角度。 rotate3d(x,y,z,angle) 定义 3D 旋转。 rotateX(angle) 定义沿着 X 轴的 3D 旋转。 rotateY(an
PyTorch ：transforms 数据增强：裁剪、翻转、旋转
热门推荐
qq_54641516的博客
09-21 1万+
学习数据预处理模块 transforms 中的数据增强方法：裁剪、翻转和旋转 ​ 来自：YEY 的博客 ​
css-transform-案例-翻转牌效果
pyhui的技术博客
06-17 627
思路 外部盒子包两个盒子 外部盒子绝对定位，内部两盒子相对定位 外部盒子hover触发内部盒子的变形 内部盒子变形的具体调整 完整代码 <style> .outter{ border: 2px solid black; position:relative; width: 800px; height: 300px; ...
css-样式 transform旋转效果
lijieaace的博客
05-07 3048
1、rotate按角度旋转 img { width: 250px; transition: all 2s; } img:hover { /* 顺 */ transform: rotate(360deg); /* 逆 */ /* transform: rotate(-360deg); */ } 2、转换原点 transform-
2021-11-22 transform属性的用法和示例,使用transform属性实现扑克牌的正反面翻转,transition属性的用法和示例,
GAARA
11-22 278
文章目录 零.transform的用法 1.属性值translate:转换 2.属性值scale:缩放 3,属性值rotate:旋转 4.属性值skew:倾斜 一.示例:点击翻转扑克牌正反面 1. 注意事项 2.完整代码 3.知识点 3.1.transition属性用于设置元素的过渡效果 3.2.div:hover #one还是div #one:hover? 二.改进:在js中调用元素的transform属性 1.css样式不变,除了hover部分 2..完整代码 3.图片资源 back.png front
QT QTransform与QMatrix 有啥区别？
weixin_30784141的博客
02-13 1155
刚开始学习QT，我使用的是QT5.12进行开发，要不时地查阅QT的官方帮助文档~ 仔细阅读QT官方帮助QTransform类以及QMatrix类，发现两个类的作用描述一模一样（“The QTransform class specifies 2D transformations of a coordinate system.”以及“The QMatrix class specifies 2D tr...
css点击卡片翻转效果
03-14
可以使用CSS3的transform属性来实现卡片翻转效果，具体实现可以参考以下代码： HTML代码： ``` 正面内容 背面内容 ``` CSS代码： ``` .card { position: relative; width: 200px; height: 200px;...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

. . . . .

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值