深入理解transform属性之翻转效果

最新推荐文章于 2022-09-21 21:44:31 发布
最新推荐文章于 2022-09-21 21:44:31 发布
阅读量5.7k 收藏 2
点赞数
分类专栏： web前端学习 文章标签： 翻转效果
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/libin_1/article/details/50866652
版权

DEMO下载：http://download.csdn.net/detail/cometwo/9459617

纯CSS3实现

这里写图片描述

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />

        <title></title>
        <style>
            a {
                display: block;
                float: left;
                margin: 10px 50px 10px 50px;
                color: red;
                border: 1px solid blue;
            }

            .a {
                transition: All 1s ease-in-out;
                width: 200px;
                height: 200px;
                background-color: #000000;
                display: block;
                text-align: center;
                line-height: 200px;
                font-size: 20px;
                font-weight: bold;
            }

            .a:hover {
                transform: rotate(360deg);
            }

            .b {
                transition: All 0.4s ease-in-out;
                width: 200px;
                height: 200px;
                background-color: #000000;
                display: block;
                text-align: center;
                line-height: 200px;
                font-size: 20px;
                font-weight: bold;
            }

            .b:hover {
                transform: scale(1.2);
            }

            .c {
                transition: All 0.4s ease-in-out;
                width: 200px;
                height: 200px;
                background-color: #000000;
                display: block;
                text-align: center;
                line-height: 200px;
                font-size: 20px;
                font-weight: bold;
            }

            .c:hover {
                transform: rotate(360deg) scale(1.2);
            }

            .d {
                transition: All 0.4s ease-in-out;
                width: 200px;
                height: 200px;
                background-color: #000000;
                display: block;
                text-align: center;
                line-height: 200px;
                font-size: 20px;
                font-weight: bold;
            }

            .d:hover {
                transform: translate(0, -10px);
            }
            /*****************************************/

            .flip-container {
                perspective: 1000;
                clear: both;
                border: 1px solid red;
                margin-top: 50px;
                margin-left: 50px;
            }

            .flip-container:hover .flipper {
                transform: rotateY(-180deg);
            }

            .flip-container,
            .front,
            .back {
                width: 200px;
                height: 200px;
            }

            .flipper {
                transition: 2s;
                transform-style: preserve-3d;
                position: relative;
            }

            .front,
            .back {
                backface-visibility: hidden;
                position: absolute;
                top: 0;
                left: 0;
            }

            img {
                width: 200px;
                height: 200px;
                overflow: hidden;
            }

            .front {
                background: red;
                z-index: 2;
            }

            .back {
                background: blue;
                transform: rotateY(-180deg);
            }
            /***********************************/

            .flip-container1 {
                perspective: 1000;
                border: 1px solid red;
                margin-top: 50px;
                margin-left: 50px;
            }

            .flip-container1:hover .flipper1 {
                transform: rotateX(-180deg);
            }

            .flip-container1,
            .front1,
            .back1 {
                width: 200px;
                height: 200px;
            }

            .flipper1 {
                transition: 2s;
                transform-style: preserve-3d;
                position: relative;
                transform-origin: 100% 100px;
                /* 高的一半 */
            }

            .front1,
            .back1 {
                backface-visibility: hidden;
                position: absolute;
                top: 0;
                left: 0;
            }

            img {
                width: 200px;
                height: 200px;
                overflow: hidden;
            }

            .front1 {
                background: red;
                z-index: 2;
            }

            .back1 {
                background: blue;
                transform: rotateX(-180deg);
            }
        </style>

    </head>

    <body>

        <a class="a">360度旋转</a>
        <a class="b">悬浮放大效果</a>
        <a class="c">旋转放大</a>
        <a class="d">上下移动</a>
        <h1 style="clear: both;">垂直翻转</h1>
        <div class="flip-container">
            <div class="flipper">
                <div class="front">
                    <img src="img/1.jpg" />
                </div>
                <div class="back">
                    <img src="img/2.jpg" />
                </div>
            </div>
        </div>

        <
最低0.47元/天 解锁文章
最骚的就是你
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
Transform变换
hp0524chl的博客
10-19 534
而且它还可以使用方便的RenderTransformOrigin属性值，从而可以为特定的变换（如旋转）使用相对坐标。包括属性ScaleX、ScaleY、CenterX、CenterY，其中ScaleX、ScaleY属性表示对象在。包含X、Y 两种属性，以原来的对象为坐标原点(0,0),然后向X轴、Y轴进行平移变换。X、Y轴进行缩放的倍数，使用CenterX 和 CenterY属性指定一个中心点。变形元素包括平移变形、旋转变形、缩放变形、扭曲变形、矩阵变形和组合变形元素，
CSS transform 三大属性 rotate、scale、translate
最新发布
xiaoyuer_2020的博客
05-23 1173
transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。
transform属性实现翻转效果
weixin_30348519的博客
09-22 638
transform:perspective(800px) rotateY(180deg);//翻转180度，透视800px; transition-delay: 0.3s;//过程时间 opacity: 1;//配合透明度更好:hover{} 产生过程效果 转载于:https://www.cnblogs.com/Neilisme/p/7574896.html...
使用transform制作书本翻页效果
苦作舟的空城机
11-06 1476
transform transform属于CSS属性 Transform属性应用于元素的2D或3D转换。这个属性允许你将元素旋转，缩放，移动，倾斜等。 在网页中需要制作一些有立体感的3d效果，比如书本翻页 tansform中有一个rotate旋转属性 属性 功能 rotate(angle) 定义 2D 旋转，在参数中规定角度。 rotate3d(x,y,z,angle) 定义 3D 旋转。 rotateX(angle) 定义沿着 X 轴的 3D 旋转。 rotateY(an
css-transform-案例-翻转牌效果
pyhui的技术博客
06-17 621
思路 外部盒子包两个盒子 外部盒子绝对定位，内部两盒子相对定位 外部盒子hover触发内部盒子的变形 内部盒子变形的具体调整 完整代码 <style> .outter{ border: 2px solid black; position:relative; width: 800px; height: 300px; ...
Qt/QML　翻转效果实例
11-02
在本文中，我们将深入探讨如何使用Qt/QML实现翻转效果。Qt是一个强大的跨平台应用程序开发框架，而QML是其内置的一种声明式语言，用于构建用户界面。在这个实例中，我们将关注如何利用QML创建一个具有翻转效果的列表...
css3 transform属性制作鼠标点击3D图片叠加动画效果
11-24
本教程将深入探讨如何利用CSS3的transform属性来创建一个鼠标点击触发的3D图片叠加动画效果。 首先，我们要理解`transform`属性的基本用法。`transform`可以接受多个函数，如`translate()`, `rotate()`, `scale()`,...
Qml翻转效果QmlFlipImage.7z
07-20
翻转效果的实现主要依赖于QML的Transform组件，特别是Rotation和Scale变换。Rotation用于改变元素的旋转角度，而Scale则可以调整元素的缩放比例。通过结合这两个属性，我们可以模拟出物体在空间中的翻转动作。 1. *...
CSS transform-origin属性的理解
09-22
**CSS transform-origin属性详解** **一、属性定义与作用** `transform-origin` 是CSS3中的一个变换属性，它用于指定元素在进行旋转、...通过深入理解和熟练运用，我们可以创造出更多富有创意和吸引力的网页效果。
翻转效果翻转效果翻转效果
03-12
在翻转效果中，主要利用了`transform`属性中的`rotateX()`, `rotateY()`, 或 `rotateZ()` 方法，这些方法可以按照指定的角度旋转元素。 2. **CSS3实现翻转效果**： - **X轴翻转**：通过设置`transform: rotateX...
卡片翻转效果实现 以及 transform常用属性详解
EmotionComputer
12-18 1723
一. 实现思路： 在一个大的div里放两个div 把第二个div翻转180度，并设置faceback-visibility: hidden;这样就会将第二个div的正面隐藏起来。 动态添加class，让最外层的大div进行旋转(里面的div也会跟着旋转)，注意:正面与反面是一个相对的概念，在旋转后，子div相对于父div的正面还是反面是不会变的，所以旋转后第一个div还是处于隐藏的状态 实现代...
transform : 盒子反转 和图片放大
m0_46581222的博客
04-06 277
transform : 盒子反转 和图片放大 学习笔记，也是方便以后查阅，欢迎友善探讨 详细的用法：https://www.w3school.com.cn/cssref/pr_transform.asp 这里记录在实际开发中用到较多的几个属性。 1.rotate旋转 transform: rotate(ndeg) 容器顺(逆)时针旋转。单位：deg(度)。整数顺时针，负数逆时针。 <!DOCTYPE html> <html lang="en"> <head> &
PyTorch ：transforms 数据增强：裁剪、翻转、旋转
热门推荐
qq_54641516的博客
09-21 1万+
学习数据预处理模块 transforms 中的数据增强方法：裁剪、翻转和旋转 ​ 来自：YEY 的博客 ​
2021-11-22 transform属性的用法和示例,使用transform属性实现扑克牌的正反面翻转,transition属性的用法和示例,
GAARA
11-22 269
文章目录 零.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
纯css3实现图片正反面旋转
qq_44777678的博客
05-18 1597
//这里需要用到两张大小一样的图片 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <me...
css-样式 transform旋转效果
lijieaace的博客
05-07 3035
1、rotate按角度旋转 img { width: 250px; transition: all 2s; } img:hover { /* 顺 */ transform: rotate(360deg); /* 逆 */ /* transform: rotate(-360deg); */ } 2、转换原点 transform-
css函数之cubic-bezier()贝塞尔曲线、径向渐变、hsl、hsla
weixin_43825473的博客
09-13 354
cubic-bezier 可用于animation-timing-function 和 transition-timing-function 属性。 div { width: 100px; height: 100px; background: red; transition: width 2s; transition-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1); } 径向渐变 HSL HSLA HSLA 即色相、饱和度、亮度、透明
transform属性
05-01
transform属性是CSS3中用来控制元素变形的属性，可以通过它来实现元素旋转、缩放、移动、扭曲...总之，transform属性是CSS3中比较强大和重要的属性之一，可以为网页添加更加生动和动态的效果，提高用户的体验和交互性。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值