[CSS] Transforms
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:;
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'>×</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'>×</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);
}
[CSS] Transforms的更多相关文章
- CSS 3 学习——transform 3D转换渲染
以下内容根据官方规范翻译,没有翻译关于SVG变换的内容和关于矩阵计算的内容. 一般情况下,元素在一个无景深无立体感的平面(flat plane)上渲染,这个平面就是其包含块所处的平面.同时,页面上的其 ...
- 用CSS开启硬件加速来提高网站性能
国外一篇文章,有点意思,转载过来,准备尝试下~ 中文地址:http://www.cnblogs.com/rubylouvre/p/3471490.html 原文地址:http://blog.teamt ...
- Head First Html and CSS学习笔记之CSS
第七章 CSS入门 元素的许多属性都可以设置样式,太多了,记不住,可以参考<CSS Pocket Reference>. 外部样式表,<link type = "text/ ...
- 前端开发教程：使用 CSS3 Transforms 构建圆形导航
在本教程中我将告诉你如何使用 CSS 变换来创建圆形导航.教程逐一讲解实现这个样式将要涉及一些基本的数学知识并配合 CSS 变换来创建这些样式.不过不用担心,这里用到的数学知识真的是很简单的.教程使用 ...
- 用CSS开启硬件加速来提高网站性能（转）
翻译文章,原文地址:http://blog.teamtreehouse.com/increase-your-sites-performance-with-hardware-accelerated-cs ...
- 用CSS变形创建圆形导航
http://www.w3cplus.com/css3/building-a-circular-navigation-with-css-transforms.html 本文由陈毅根据SARA SOUE ...
- 使用CSS完成元素居中的七种方法
在网页布局中元素水平居中比元素垂直居中要简单不少,同时实现水平居中和垂直居中往往是最难的.现在是响应式设计的时代,我们很难确切的知道元素的准确高度和宽度,所以一些方案不大适用.据我所知, 在CSS中至 ...
- 实用css小技巧
display应用 在取消了ul/ol的默认样式{padding:0;list-style-type:none;}的时候:ul的li设置成了行内块(display:inline-block)的话,这时 ...
- 一些实用而又记不住的css技巧
user-select 禁止用户选中文本 div { user-select: none; /* Standard syntax */ } 清除手机tap事件后element 时候出现的一个高亮 * ...
随机推荐
- Attributes(1):反射Attribute并输出
using System; using System.Reflection; using System.Text; namespace Attribute01 { class Program { ...
- 从gcc的__attribute__((packed))聊到结构体大小的问题
公司的前辈的代码里面 结构体的花括号最后 有__attribute__((packed))字样.以前没见过,所以查了查.学习学习http://blog.sina.com.cn/s/blog_559f6 ...
- Welcome to JimmyCheung's blog!
博客开通,写写学习笔记,写写心情,写写生活中的点点滴滴~ 有钱的捧个钱场嘞,没钱的贡献个点击量,新鲜的博客出炉咯,来五毛钱的博文呗~ By Jimmy 2014.09.16
- babun,windows shell
babun是windows上的一个第三方shell,在这个shell上面你可以使用几乎所有linux,unix上面的命令,他几乎可以取代windows的shell. babun的几个特点: 使用bab ...
- bzoj 2331: [SCOI2011]地板 插头DP
2331: [SCOI2011]地板 Time Limit: 5 Sec Memory Limit: 128 MBSubmit: 541 Solved: 239[Submit][Status] D ...
- PHP 7 探针的安装与测试
首先,这是一篇软文,没错!就是一篇软文.因为我知道「PHP 是世界上最好的语言」,所以我相信很多人愿意读这篇用户帮忙写的软文,因为这篇软文应该能帮助 PHP 开发的同学一点小忙.我们是一家成立了7年的 ...
- 【UVALive - 3487】 Duopoly（网络流-最小割）
Description The mobile network market in country XYZ used to be dominated by two large corporations, ...
- .net 开源项目
.NET开发人员值得关注的七个开源项目 [IT168技术分析]微软近几年在.NET社区开源项目方面投入了相当多的时间和资源,不禁让原本对峙的开源社区阵营大吃一惊,从微软.NET社区中的反应来看,微软. ...
- Java FutureTask理解
尊敬原创作者,转载请注明出处: http://blog.csdn.net/gemmem/article/details/8956703 FutureTask是为了弥补Thread的不足而设计的,它可以 ...
- -_-#【Better Code】throttle / debounce
浅谈javascript的函数节流 javascript函数的throttle和debounce throttle 疯狂触发事件,固定步调执行 debounce 疯狂触发事件,不会执行 var res ...