CSS旋转效果

最新推荐文章于 2024-05-17 10:26:44 发布
最新推荐文章于 2024-05-17 10:26:44 发布
阅读量579 收藏 1
点赞数
分类专栏： 网站开发 文章标签： css 旋转效果
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/AnonymKing/article/details/85338016
版权

0x00 预期效果

  • 效果如下
    CSS旋转效果

0x01 代码实现

  • 思想也比较简单，主要一个特点是监听父容器的事件来决定子容器的状态，这样可以消除抖动的问题；其他的我就不多说了，代码比较简单，大家直接看代码吧。
  • 代码如下
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>CSS旋转效果</title>
    <style>
        html, body {
            width: 100%;
            height: 100%;
        }

        /*设置外中内三层div的大小一致*/
        .container, .item, .page {
            width: 320px;
            height: 180px;
            line-height: 180px;
            text-align: center;
            font-size: 24px;
        }

        .item {
            /*设置中间层旋转时的动画效果*/
            transition: all .4s ease;
        }

        .page {
            /*配合旋转动画*/
            transition: .4s;
            background-color: goldenrod;
            box-shadow: 4px 2px 4px #999;
        }

        .front {
            opacity: 1;
        }

        .back {
            /*设置位置与正面重合*/
            position: absolute;
            top: 0;
            left: 0;
            /*设置透明 预先旋转180deg*/
            opacity: 0;
            transform: rotateY(180deg);
        }

        .container:hover .item{
            transform: rotateY(180deg);
        }

        .container:hover .front{
            opacity: 0;
        }

        .container:hover .back{
            opacity: 1;
        }
    </style>
    <link rel="manifest" href="./static/manifest.json" />
    <script src="./static/js/sw-server.js"></script>
</head>
<body>

<div class="container">
    <div class="item">
        <div class="page front">这是正面</div>
        <div class="page back">这是反面</div>
    </div>
</div>
</body>
</html>

0x02 完成&总结

  • 我看过好多地方用这种效果，但是基本上都有抖动现象
  • 我的这种实现方式消除了抖动的效果
姑苏流白
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css实现立体旋转
土匪丁的博客
01-24 921
先放效果 主要涉及css：perspective,animation 直接上代码 需要一个父级div包裹一个子元素 父元素添加perspective，数值表示元素距离视图的距离，这里写了1000px,效果如下图 改成300px之后 数值决定景深 然后我们给其加上animation动画，2s的重复匀速旋转 得到最终的效果 ...
css旋转
weixin_57726829的博客
05-09 281
功能实现 这是表面结构，里面有个正方体，外面也是一个大正方体所包围一个小正方体，里面显示电影图片进行旋转，要人感3D视觉，生有视觉体会。外观透明度也用所虚化，整体旋转的小正方体。都是用css样式进行研发。外观的体色呈出喜出外望。 接下观看视觉:图：主要是rotate旋转的作用，给他设定的值，他会偏向之多少度走， 这是运行代码，将揭晓所需要大小。 二、自我旋转关系 图片2，这里有鼠标事件，当你用鼠标触碰的他，正方体形状将会旋转以及用9 ...
CSS基础学习——动画
热门推荐
qq_41890177的博客
08-26 1万+
一、CSS3 2D变形（利用Transfrom方法） 1、rotate（angle） 元素顺时针旋转给定的角度。允许负值，元素将逆时针旋转。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <style> div{ width: 100px
你还不知道css的旋转效果怎么实现？来这里看看吧
Wod_7的博客
05-22 1万+
删除 重试 复制 旋转效果是CSS中最基础而且最常用的效果之一。它在设计中拥有着广泛的应用，可以用于改变图标、旋转图片、达到复杂的动画效果等等。在这篇文章中，我们将深入讨论如何在CSS中实现旋转效果，从旋转图标到3D旋转，让我们开始吧！
Css属性transform详解（变形、旋转、缩放）
最新发布
宝子的博客
05-17 1036
1.变形就是指通过css来改变元素的形状或位置 2.变形不会影响到页面的布局(不会脱离文档流) 3.平移元素，百分比是相对于自身计算的1.通过旋转可以使用元素沿着x y 或 z旋转指定的角度(transform)
css元素转换(旋转函数、rotateX 和 rotateY 的使用、移动函数、缩放函数、过渡、动画)详解
Argonaut_的博客
01-05 1万+
页面上有两个 div 元素块，使用 transform: translateX(20px) 让第一个元素块向 X 轴移动 20 个像素；使用 transform: translateY(30px) 让第二个元素块向 Y 轴移动 30 个像素。在上面代码中，用 steps 的方式将 div 元素分成四步，使元素的面积逐渐变成原来的 2 倍，当鼠标从元素上移开，又会以四步的形式将元素还原成原有的大小。接下来给大家介绍一下 transition-timing-function 属性的取值吧！
旋转任意角度 如何让div旋转一定的角度 (转)
weixin_30463341的博客
12-10 679
<html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>DIV旋转属性的演示</title> <meta http-equiv="X-UA-Compatible"...
CSS如何实现旋转：深入理解与实用技巧
01101
01-14 1402
在Web开发中，CSS（层叠样式表）是一种强大的工具，它不仅能够控制网页的布局和样式，还能实现各种视觉效果，包括元素的旋转。本文将深入探讨如何使用CSS实现旋转效果，并提供一些实用的技巧和示例。
js+css3实现旋转效果
10-20
在本文中，我们将深入探讨如何使用JavaScript（js）与CSS3结合实现元素的旋转效果。旋转效果在网页设计中很常见，例如按钮点击反馈、动画效果等，它能增加交互性和视觉吸引力。以下是对标题和描述中所述知识点的详细...
css效果旋转3d图
09-08
为了创建更复杂的3D旋转效果，还可以结合使用其他CSS3的3D变换，如`translate3d()`和`scale3d()`。同时，`transform-origin`属性可以改变元素的旋转中心点，提供更多的设计灵活性。 总之，“css效果旋转3d图”是一...
css实现图片旋转效果
10-25
本文将深入探讨如何利用CSS实现图片的旋转效果，以及如何使多张图片以不同的频率围绕同一圆心旋转。 首先，我们从基础开始。CSS中的`transform`属性允许我们对元素进行各种变换，如旋转、缩放、移动和倾斜。要使...
CSS图片3D旋转效果
12-09
CSS不仅可以控制页面布局，还能实现丰富的动态效果，比如我们今天要讨论的“CSS图片3D旋转效果”。 这个效果是通过CSS3的3D转换功能实现的，它允许我们在二维平面上展示三维对象，让网页元素呈现出立体感。当鼠标...
关于css旋转动画效果的简单实现
09-24
总结起来，实现CSS旋转动画效果主要涉及以下知识点： 1. `transition`属性：定义元素在不同状态间的过渡效果，包括时间长度和过渡的属性。 2. `transform`属性：用于对元素进行几何变换，如旋转、缩放等。`rotate()...
css旋转效果
咸鱼起码是条鱼
05-08 644
除了旋转函数，我们还可以使用 transform-origin 属性来改变元素的旋转中心点。transform-origin 属性指定了元素的中心点，从而决定了元素在旋转时的中心点。常见的旋转函数包括 rotate()、rotateX()、rotateY() 和 rotateZ()，它们分别可以沿着元素的 X、Y 和 Z 轴旋转。transform 属性可以通过一系列的函数来改变元素的形状、大小和位置，其中就包括旋转函数。上面的代码将元素的中心点设置为它的中心位置，从而在旋转时绕着自己的中心点旋转。
CSS实现旋转风车
陆之沂的博客
11-24 2946
CSS实现旋转风车
web前端基础——rotate实现旋转效果
NGUP_LEE的博客
03-08 3516
使用rotate实现元素旋转效果 语法：transform:rotate(j角度) 角度的单位是deg，角度可以正值可以负值，正值顺时针，负值逆时针 注意：测试旋转必须要有过渡的属性 样例代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
【CSS3】CSS3 2D 转换 - rotate 旋转 ( transform: rotate(90deg) 旋转样式 | transition 过度效果设置 )
让 学习 成为一种 习惯 ( 韩曙亮 の 技术博客 )
04-21 2106
一、CSS3 2D 转换 - rotate 旋转 二、代码示例 1、未旋转状态 2、旋转示例 - transition 过度效果设置
css实现旋转
百变鹏仔工作室
01-26 612
属性还支持其他几种变换类型，如平移、缩放和倾斜等，它们都使用不同的函数进行表示。指旋转的角度，可以是正数或负数，正数表示顺时针旋转，负数表示逆时针旋转。是指一个具体的变换类型。对于旋转来说，我们可以使用。在CSS中，旋转可以使用。
实现div旋转效果
leiax00
07-15 697
<template> <el-dialog custom-class="loading-dlg" :show-close="false" :visible="selfLoading.show" > <div class="loading-main"> <div class="icon"> <svg-icon icon-class="iconLoadingStep-1" class-nam
css3d旋转效果图
03-07
CSS3D旋转效果图是一种利用CSS3的3D变换属性来实现的图形旋转效果。通过使用CSS3的transform属性和perspective属性，可以创建出具有立体感的旋转效果。 要实现CSS3D旋转效果图，可以按照以下步骤进行操作： 1. ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值