css3 字体旋转

<style>
#mycon
{
	font-weight: bold;
	font-size: 150px;
	transform: rotateX(10deg);
	-webkit-transform: rotateX(10deg); /* Safari and Chrome */
	-webkit-transform: rotateY(120deg); /* Safari and Chrome */
}

#mycon1
{
	font-weight: bold;
	font-size: 150px;
	transform: rotateX(10deg);
	-webkit-transform: rotateX(120deg); /* Safari and Chrome */
}

</style>
<h1>
	你不会做吧!
</h1>
<div id="mycon">
	你不会做吧?
</div>

<div id="mycon1">
	你不会做吧?
</div>

时间: 2024-10-29 19:12:13

css3 字体旋转的相关文章

css3 字体、2D转换、3D转换

学习篇之CSS3 字体.2D转换.3D转换 一.字体 @font-face 将字体文件存放到 web 服务器上,通过CSS3 @font-face规则中定义,它会在需要时被自动下载到用户的计算机上. @font-face { font-family: myFonts;//定义字体名称 src: url(myFonts.ttf), url(myFonts.eot), url(myFonts.otf);//字体文件来源 可选.ttf..eot..otf等三种格式文件 } PS:为了兼容不同浏览器最好

CSS3字体图标

网址:http://icomoon.io/ 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <

css3制作旋转立方体相册

css3制作旋转立方体相册 首先让我们来看一下最终效果图: 当鼠标放在图片上是介个样子滴: 是不是觉得很好看?那接下来就一起制作吧! 我个人觉得编程,首先是思路,然后是代码,一起分析一下这个效果的思路. 1.背景颜色,它属于一种渐变的背景色(当然这不是重点,可以根据自己的爱好进行设置): 2.我们可以观察一下他是有两个旋转的立方体,大立方体套小立方体: 3.点击图片的时候,外部大立方体向外延伸. 有了这个大体的思路我们就可以开始敲代码了. 1.新建文件夹 将各个不同类型的代码进行归类是很有必要的

css3立体旋转菜单

css3立体旋转菜单,css3,3D,立体旋转,立体菜单,菜单导航,css3立体旋转菜单是一款纯css3实现的三维立体旋转导航菜单. 源码下载页:http://www.huiyi8.com/sc/7127.html css3立体旋转菜单,布布扣,bubuko.com

CSS3 字体【@font-size使用全攻略-配合font squirrel】

篇1: CSS3 字体 CSS3 @font-face 规则 以前CSS3的版本,网页设计师不得不使用用户计算机上已经安装的字体. 使用CSS3,网页设计师可以使用他/她喜欢的任何字体. 当你发现您要使用的字体文件时,只需简单的将字体文件包含在网站中,它会自动下载给需要的用户. 您所选择的字体在新的CSS3版本有关于@font-face规则描述. 您"自己的"的字体是在 CSS3 @font-face 规则中定义的. 浏览器支持 表格中的数字表示支持该属性的第一个浏览器版本号. 属性

CSS3放大旋转

CSS3放大旋转实例: <!DOCTYPE html> <html > <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>CSS3放大旋转</title> <style> .a{ transition:All 0.4s ease-in-out; -webkit-tra

CSS3绘制旋转的太极图案

1.效果布局主要用了用了3个DIV,配合:before.:after利用css3中的圆角(border-radius).阴影(box-shadow)完成. 2.动画效果CSS3中的@keyframes.animation <!doctype html> <html> <head> <meta charset="utf-8"> <title>CSS3绘制旋转的太极图案</title> <style> bo

CSS3实现旋转的太极图(二):只用1个DIV

效果预览: PS: 1.昨天用3个DIV实现了太极图(点击查看),,今天试着用1个Div来做. 2.公司刚忙过双10周年庆,最近空闲下来,闲着也是闲着,总得写点东西吧. 3.高手莫喷,小弟仅仅是没事折腾一下,做个的记录. 4.有网友反应旋转的时候会卡. 5.IE浏览器,出门左拐.走好不送 ~~~ 实现步骤: HTML: <div class="box-taiji"></div> 步骤一: .box-taiji {width:0;height:400px;posi

css3 3d旋转图片立方体特效代码

一.什么是css3 3d旋转 ? 形成一个3D空间: transform-style:preserve-3d    ( 让父元素形成3D,让其子元素在3D空间进行变化 ). 3d场景,在垂直于屏幕的方法,相对于3d多出个z轴,Z轴:靠近屏幕的方向是正向,远离屏幕的方向是反向,2d场景,在屏幕上水平和垂直的交叉线x轴和y轴. 二.关于css 3d旋转的相关属性及使用方法 变形属性:transform 3D功能函数 ----3D的位移:transform:translate3d(x,y,z);