[CSS] Transforms

最新推荐文章于 2025-09-03 13:04:57 发布
转载 最新推荐文章于 2025-09-03 13:04:57 发布 · 71 阅读 · 0 ·
CC 4.0 BY-SA版权
原文链接：http://www.cnblogs.com/Answer1215/p/4773306.html

本文介绍了一种使用CSS实现元素360度旋转的方法，不仅探讨了不同单位（如turn）的应用，还展示了如何通过:hover伪类触发旋转效果。此外，文章还涉及了表单输入框与标签的交互样式，包括颜色变化与位置调整。

Degrees and Turns

Degrees are just one value that can be set to a rotate transform to determine how much rotation should be applied. Fill in the blank with another value that accomplishes the same rotation as the code below but doesn't use degrees.

 

div {
  transform: rotate(360deg);
}

div {
  transform: rotate(1turn);
}

 

A Sugary Spinning Icon

.modal-close {
  font-size: 200%;
  right: 15px;
  top: 0;
  position: absolute;
  transition: transform 2s ease-out;
}

.modal-close:hover{
    transform: rotate(1turn)
}
<!DOCTYPE>
<html lang='en'>
  <head>
    <meta charset='utf-8'>
    <title>Cosplay Happenings</title>
    <link href='level2-4.css' rel='stylesheet' type='text/css'>
  </head>
  <body>
    <!-- Nav -->
    <nav class='nav'>
      <div class='cell'>
        <a class='nav-logo' href='/'>
          <div class='shing'>
            <img src='logo.png' alt='Sweet Lands' />
          </div>
        </a>
        <ul class='nav-menu'>
          <li><a href='#retweets'>Retweets</a></li>
          <li><a href='#pictures'>Pictures</a></li>
          <li><a href='#event'>Upcoming</a></li>
        </ul>
      </div>
    </nav>

    <!-- Header -->
    <header class='header'>
      <div class='cell well'>
        <h1 class='header-title'>Cosplay Happenings</h1>
        <p class='header-subtitle'>Welcome to our candy-coated community!</p>
      </div>
    </header>

    <!-- Most Retweeted -->
    <section class='retweets' id='retweets'>
      <div class='cell well'>
        <h2>Most Retweeted</h2>
        <div class='retweet group'>
          <img src='unicorn.jpg' alt='Unicorn' width='200' height='200' />
          <p>
            Sparkles the Unicorn saunters down the Lemony Brick Road and
            prances past the Soda Pop River! Her majestic horn points the way
            to the Frosting Fortress, as her glittery mane and tail sway in the
            bubblegum breeze.
          </p>
        </div>
        <div class='retweet group'>
          <img src='fairy.jpg' alt='Fairy' width='200' height='200' />
          <p>
            Who’s that there in the Candy Corn Fields? Why, it’s Sarsaparilla
            the Sherbet Sprite! He’s thoughtfully pondering which treat to
            partake of next. The Lollipop Forest is in the distance, in case he
            needs a place to rest his sweet head.
          </p>
        </div>
      </div>
    </section>

    <!-- Purchase -->
    <section class='pictures' id='pictures'>
      <div class='cell well'>
        <h2>Pictures</h2>
        <ul class='pictures-list group'>
          <li><img src='group-01.jpg' alt='Group' width='200' height='200' /></li>
          <li><img src='cupcake.jpg' alt='Cupcake' width='200' height='200' /></li>
          <li><img src='rainbow.jpg' alt='Rainbow' width='200' height='200' /></li>
          <li><img src='donut.jpg' alt='Donut' width='200' height='200' /></li>
          <li><img src='dog.jpg' alt='Dog' width='200' height='200' /></li>
          <li><img src='fairy.jpg' alt='Fairy' width='200' height='200' /></li>
          <li><img src='unicorn.jpg' alt='Unicorn' width='200' height='200' /></li>
          <li><img src='group-02.jpg' alt='Group' width='200' height='200' /></li>
        </ul>
      </div>
    </section>

    <!-- Contact -->
    <section class='event'  id='event'>
      <div class='cell well'>
        <h2>Upcoming Event</h2>
        <div class='event-content'>
          <img src='sweetlandia.png' alt='SweetLandia' width='200' />
          <h3>SweetLandia</h3>
          <p>
            Once upon a time, there was a magical place called Sweet Lands — a
            world we may now only travel to in our imaginations. But one
            weekend every year, when the sugar cane stalks bend toward the east
            and the cotton candy is at its swirliest, the Sweetlandia
            convention brings this wondrous world within reach! So join
            Sparkles, Pierre, and the rest of the gang for a meeting of the
            sweet-minded in sunny Omaha, Nebraska! It’s sure to be your
            sweetest adventure yet.
          </p>
          <div class='event-action'>
            <a href='#' class='btn buy-button'>
              <span class='top content'>Register Now!</span>
              <span class='bottom content'>Hurry, Limited Space!</span>
            </a>
          </div>
        </div>
      </div>
    </section>

    <!-- Register Modal -->

    <div class='modal-overlay'></div>
    <div class='modal'>
      <div class='modal-header'>
        <a class='modal-close' href='#' aria-label='Close'>&times;</a>
        <h3>Register</h3>
      </div>
      <div class='modal-content'>
        <form class='form' action=''>
          <fieldset class='form-field'>
            <!-- <label class='form-label' for='type'>CC Type</label> -->
            <select class='cs-select cs-skin-elastic' name='type'>
              <option value='visa'>Visa</option>
              <option value='mastercard'>MasterCard</option>
              <option value='american_express'>American Express</option>
            </select>
          </fieldset>

          <fieldset class='form-field'>
            <input class='form-input' type='text' id='number' />
            <label class='form-label' for='number'>CC Number</label>
          </fieldset>

          <fieldset class='form-field'>
            <input class='form-input' type='text' id='expiration' />
            <label class='form-label' for='expiration'>CC Expiration</label>
          </fieldset>

          <div class='form-submit'>
            <input class='btn' type='Submit' value='Submit' />
          </div>
        </form>
      </div>
    </div>
    <script src='application.min.js'></script>
  </body>
</html>

 

 

 

Label Color and Position and Size

.form-input + .form-label {
  color: #6A7989;
    transition: all 0.3s;
}
.form-input:focus + .form-label {
  color: #333333;
  transform: translateY(-40px) scale(0.8); 
}
<!DOCTYPE>
<html lang='en'>
  <head>
    <meta charset='utf-8'>
    <title>Cosplay Happenings</title>
    <link href='level2-6.css' rel='stylesheet' type='text/css'>
  </head>
  <body>
    <!-- Nav -->
    <nav class='nav'>
      <div class='cell'>
        <a class='nav-logo' href='/'>
          <div class='shing'>
            <img src='logo.png' alt='Sweet Lands' />
          </div>
        </a>
        <ul class='nav-menu'>
          <li><a href='#retweets'>Retweets</a></li>
          <li><a href='#pictures'>Pictures</a></li>
          <li><a href='#event'>Upcoming</a></li>
        </ul>
      </div>
    </nav>

    <!-- Header -->
    <header class='header'>
      <div class='cell well'>
        <h1 class='header-title'>Cosplay Happenings</h1>
        <p class='header-subtitle'>Welcome to our candy-coated community!</p>
      </div>
    </header>

    <!-- Most Retweeted -->
    <section class='retweets' id='retweets'>
      <div class='cell well'>
        <h2>Most Retweeted</h2>
        <div class='retweet group'>
          <img src='unicorn.jpg' alt='Unicorn' width='200' height='200' />
          <p>
            Sparkles the Unicorn saunters down the Lemony Brick Road and
            prances past the Soda Pop River! Her majestic horn points the way
            to the Frosting Fortress, as her glittery mane and tail sway in the
            bubblegum breeze.
          </p>
        </div>
        <div class='retweet group'>
          <img src='fairy.jpg' alt='Fairy' width='200' height='200' />
          <p>
            Who’s that there in the Candy Corn Fields? Why, it’s Sarsaparilla
            the Sherbet Sprite! He’s thoughtfully pondering which treat to
            partake of next. The Lollipop Forest is in the distance, in case he
            needs a place to rest his sweet head.
          </p>
        </div>
      </div>
    </section>

    <!-- Purchase -->
    <section class='pictures' id='pictures'>
      <div class='cell well'>
        <h2>Pictures</h2>
        <ul class='pictures-list group'>
          <li><img src='group-01.jpg' alt='Group' width='200' height='200' /></li>
          <li><img src='cupcake.jpg' alt='Cupcake' width='200' height='200' /></li>
          <li><img src='rainbow.jpg' alt='Rainbow' width='200' height='200' /></li>
          <li><img src='donut.jpg' alt='Donut' width='200' height='200' /></li>
          <li><img src='dog.jpg' alt='Dog' width='200' height='200' /></li>
          <li><img src='fairy.jpg' alt='Fairy' width='200' height='200' /></li>
          <li><img src='unicorn.jpg' alt='Unicorn' width='200' height='200' /></li>
          <li><img src='group-02.jpg' alt='Group' width='200' height='200' /></li>
        </ul>
      </div>
    </section>

    <!-- Contact -->
    <section class='event'  id='event'>
      <div class='cell well'>
        <h2>Upcoming Event</h2>
        <div class='event-content'>
          <img src='sweetlandia.png' alt='SweetLandia' width='200' />
          <h3>SweetLandia</h3>
          <p>
            Once upon a time, there was a magical place called Sweet Lands — a
            world we may now only travel to in our imaginations. But one
            weekend every year, when the sugar cane stalks bend toward the east
            and the cotton candy is at its swirliest, the Sweetlandia
            convention brings this wondrous world within reach! So join
            Sparkles, Pierre, and the rest of the gang for a meeting of the
            sweet-minded in sunny Omaha, Nebraska! It’s sure to be your
            sweetest adventure yet.
          </p>
          <div class='event-action'>
            <a href='#' class='btn buy-button'>
              <span class='top content'>Register Now!</span>
              <span class='bottom content'>Hurry, Limited Space!</span>
            </a>
          </div>
        </div>
      </div>
    </section>

    <!-- Register Modal -->

    <div class='modal-overlay'></div>
    <div class='modal'>
      <div class='modal-header'>
        <a class='modal-close' href='#' aria-label='Close'>&times;</a>
        <h3>Register</h3>
      </div>
      <div class='modal-content'>
        <form class='form' action=''>
          <fieldset class='form-field'>
            <!-- <label class='form-label' for='type'>CC Type</label> -->
            <select class='cs-select cs-skin-elastic' name='type'>
              <option value='visa'>Visa</option>
              <option value='mastercard'>MasterCard</option>
              <option value='american_express'>American Express</option>
            </select>
          </fieldset>

          <fieldset class='form-field'>
            <input class='form-input' type='text' id='number' />
            <label class='form-label' for='number'>CC Number</label>
          </fieldset>

          <fieldset class='form-field'>
            <input class='form-input' type='text' id='expiration' />
            <label class='form-label' for='expiration'>CC Expiration</label>
          </fieldset>

          <div class='form-submit'>
            <input class='btn' type='Submit' value='Submit' />
          </div>
        </form>
      </div>
    </div>
    <script src='application.min.js'></script>
  </body>
</html>

 

 

Change the transform to transition over 0.3s and the color over 0.5s.

.form-input + .form-label {
  position: relative;
  padding: 0 1em;
  cursor: text;
  color: #6A7989;
  transform-origin: left center;
  transition: transform 0.3s, color 0.5s;
}

.form-input:focus + .form-label {
  color: #333333;
  transform: translateY(-40px) scale(0.8);
}

 

转载于:https://www.cnblogs.com/Answer1215/p/4773306.html

Transforms in CSS
11-24
Transforms in CSS
CSS3 transforms应用于背景图像的解决方法
01-19
CSS transformations虽然很酷，但还没有应用于背景图像。这篇文章提供了一个很好的解决方法，当您确实想要旋转背景图像时，或者在容器元素旋转时保持背景图像不变。 使用css3转换属性可以缩放、倾斜和旋转任何元素。...
CSS transforms
weixin_33985507的博客
12-02 129
transforms 定义：可以在不影响正常文档流的情况下改变作用内容的位置 可以进行的变形包括旋转，倾斜，缩放以及位移，同时适用于平面以及三维空间。 属性：只要包含下面两个 transform transform-origin transform: 定义了一系列变化方法 rotate:设置一个角度使元素按照相对原点在二维空间进行转换， 当值为正值得时候顺时针旋转，当值为负值的时候按照逆时针...
css Transforms 属性
weixin_42638161的博客
08-29 226
Transforms 属性可以通过此属性实现元素的位移translate(x,y)，缩放scale(x,y)，2d旋转rotate(angle)，3d旋转rotate3d(angle),倾斜变换skew(x-angle,y-angle)等 内容垂直居中 在前端开发过程中，内容居中是常见的需求。其中，居中又可以分为水平居中和垂直居中。水平居中是比较容易的，直接设置元素的margin:0 auto 就可以实现。但是垂直居中相对来说是比较复杂一些的。实现的方法也比较多，比如flex布局，display:table
css a 圆形,使用css transforms来创建一个漂亮的圆形菜单
weixin_42307290的博客
08-03 740
在这个教程里我们将向大家展示如何使用css transforms来创建一个漂亮的圆形菜单。我们将一步步的带你创建样式表，然后解释一些使用到的数学计算公式和简单逻辑，以便使你有一个很清晰的思路。正如上面所说的，我们将使用到一些基本的数学计算公式和css transforms来创建样式。但是你不用担心，这些公式都非常简单，我将一步步的给大家解释。HTML结构:我们要创建的是一个菜单，让我们先从正常的菜...
Cypress CSS Transforms测试：变换效果验证
gitblog_00512的博客
09-03 820
在现代Web开发中，CSS Transform（变换）已成为创建动态、响应式用户界面的核心技术。从简单的旋转效果到复杂的3D动画，CSS变换让开发者能够以声明式的方式实现丰富的视觉体验。然而，这些视觉效果的正确性往往难以通过人工测试来保证，特别是在不同浏览器和设备上的表现一致性。 **痛点场景**：你是否曾经遇到过这样的情况？ - 一个精心设计的卡片翻转动画在Chrome上完美运行，但在Safa...
W3C CSS Transforms摘译
weixin_34025151的博客
09-17 309
CSS Transforms可以对一个元素进行二维平面或三维空间的变换，如translate, rotate, scale和skew等变换。 下面是对W3C官网CSS Transforms模块的部分摘译，为了理解的连贯性，调整了W3C规范中相关章节的顺序。 二维子集（Two Dimensional Subset） 用户浏览器（UAs）可能不总能渲染出三维变换，那么它们就只能支持该规范的一个二维子...
前端必知必会-CSS 3D变换Transforms
qq_24018193的博客
09-03 1594
本文介绍了CSS 3D变换Transforms的使用，如有问题欢迎私信和评论。
transforms 属性 - CSS3 新特性
向往的那片海洋
12-17 600
变形是什么 在 CSS3 中提供 transforms 属性，通过修改坐标，可以在不影响正常文档流的情况下改变作用内容的位置。CSS transforms 包括一系列 CSS 属性，通过这些属性可以对 HTML 元素进行变形。可以进行的变形有以下几种： 旋转 倾斜 缩放 位移 同时适用于平面以及三维空间 变形属性 transfrom 属性 在 CSS 中 transform 属性允许我们修改 CSS 视觉格式模型的坐标空间。使用它，元素可以被转换（translate）、旋转（rotate）、缩放（
css 3d ui,CSS 3D transforms
weixin_39670849的博客
08-03 125
https://www.creativebloq.com/css3/20-stunning-examples-css-3d-transforms-11112759https://github.com/fofr/paulrhayes.com-experimentsExperiment: A tetrahedron built with CSS 3D transforms — Paul Hayes#p...
CSS: transforms
weixin_34038293的博客
03-26 160
CSS2D Transforms CSS Transforms CSS transforms allow you to translate, rotate, scale, and skew elements. A transformation is an effect that lets an element change shape, size and position. CSS su...
CSS 3D transforms
weixin_30409849的博客
07-13 130
https://www.creativebloq.com/css3/20-stunning-examples-css-3d-transforms-11112759 https://github.com/fofr/paulrhayes.com-experiments <!DOCTYPE html> <html lang="en"> <head> ...
jquery-dragme:一个使用 CSS3 Transforms 拖动元素的超轻量级 jQuery 插件
07-02
一个超轻量级的 jQuery 插件，用于使用 CSS3 Transforms 拖动元素。 这个插件的目标不是替代 jQuery UI 的可拖动，而是一个最小的插件，使某些元素在页面上可拖动，即模式窗口。 用法 $ ( '.my-modal-window' ) . ...
动画技术性能对比：JavaScript vs CSS Transforms/Transitions
此外，对于性能要求极高的项目，还可以考虑使用Web Animations API，这是介于CSS和JavaScript之间的一种新型动画技术，旨在提供比CSS Transforms和Transitions更丰富的动画控制能力，同时保持较高的性能。...
奥运会科普平台系统-奥运会科普平台系统源码-奥运会科普平台系统代码-springboot奥运会科普平台系统源码-基于springboot的奥运会科普平台系统设计与实现-项目代码
最新发布
09-08
奥运会科普平台系统-奥运会科普平台系统源码-奥运会科普平台系统代码-springboot奥运会科普平台系统源码-基于springboot的奥运会科普平台系统设计与实现-项目代码
Hattrick 是一款简单、快速的跨平台网络安全编码转换工具 Hattrick is a network securi
09-08
Hattrick 是一款简单、快速的跨平台网络安全编码转换工具 Hattrick is a network security related code conversion tool..zip
全面收录 Swoole 相关内容的中文 CHM 格式文档
09-08
打开下面链接，直接免费下载资源： https://renmaiwang.cn/s/wsszs Swoole 框架的中文版本 CHM 格式文档
自主空中和地对空目标追逐和拦截的导弹制导和弹道控制系统.zip
09-08
1.版本：matlab2014a/2019b/2024b 2.附赠案例数据可直接运行。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。
lodger47sina_work_one_25176_1757323922449.zip
09-08
lodger47sina_work_one_25176_1757323922449.zip
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值