[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 时候出现的一个高亮 * ...
随机推荐
- ajax 异步上传视频带进度条并提取缩略图
最近在做一个集富媒体功能于一身的项目.需要上传视频.这里我希望做成异步上传,并且有进度条,响应有状态码,视频连接,缩略图. 服务端响应 { "thumbnail": "/ ...
- JS+CSS实现选项卡功能
[小小一记] 首先我们写一个选项卡的结构出来,包括tab和content: 首先是tab: <ul class="ttitle-box-tabs" id="tabs ...
- phpcms安装完成后总是跳转到install/install.php
很多人在本地安装phpcms后总是跳转到install/install.php.由于很多人是第一次使用phpcms,不知道为何会出现这个错误.出现这个大都是phpcms的缓存所致. 如何解决ph ...
- ubuntu 14.04安装quickbuild server (一)
官网: http://www.pmease.com/ 指导网站: http://wiki.pmease.com/display/QB60/ 1. 安装quickbuild server ------ ...
- Noah的学习笔记之Python篇：函数“可变长参数”
Noah的学习笔记之Python篇: 1.装饰器 2.函数“可变长参数” 3.命令行解析 注:本文全原创,作者:Noah Zhang (http://www.cnblogs.com/noahzn/) ...
- JSOP
说到 JSONP 就要说到同源策略(Same Origin Policy), 同源策略是浏览器最核心的也是最基本的安全功能. 浏览器的同源策略,限制了来自不同源的 “document” 或脚本,对当前 ...
- 《Braid》碎片式台词
谁见到过风? 你没有,我也没有. 但当树儿低下头, 便是风儿经过时. 便是风儿穿过的时候. 但当树叶微微摇首, 你没有,我也没有. 谁见到过风? 二.时间与宽恕 1.提姆要出发了!他要去寻找并救出公主 ...
- The Model Complexity Myth
The Model Complexity Myth (or, Yes You Can Fit Models With More Parameters Than Data Points) An oft- ...
- ckeditor与ckfinder简单整合使用
Ckeditor与ckfinder简单整合使用 功能:主要用来发送图文的email,图片上传到本地服务器,但是email的图片地址要写上该服务器的远程地址(图片地址:例如:http://www.bai ...
- Android sqlite数据库存取图片信息
Android sqlite数据库存取图片信息 存储图片:bitmap private byte[] getIconData(Bitmap bitmap){ int size = bitmap.get ...