CSS旋转图片

1、实现源码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS旋转图片</title>
<style type="text/css">
	#div_img{
		margin: 100px auto 0;
		transform:rotate(30deg);
		-moz-transform:rotate(30deg);
		-webkit-transform:rotate(30deg);
		-o-transform:rotate(30deg);
		filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
	}
</style>
</head>

<body style="width:99%; height:100%;">
   <div id="body_div" style="text-align:center; vertical-align:middle;">
   		<img src="cat.jpg" id="div_img" width="500" height="400"/>
   </div>
</body>
</html>

2、实现结果

版权声明:本文为博主原创文章,未经博主允许不得转载。

时间: 2024-10-14 16:03:17

CSS旋转图片的相关文章

css 中图片旋转,倾斜,位移,平滑

在开发中,我们常常需要对图片有一些绚丽的效果,比如是图片旋转,平移,倾斜等.其实这些在css3中都已经存在,整理下作为demo,以后参考使用,也希望供大家交流学习.如果不足,多多指导. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>图片效果</title> <style type="text/css"> *{

360度旋转图片小特效

现在,在这个网络发达的时代,一些电子商务公司,需要将自己线上的产品给买家或用户看,为了能让用户了解的更全面,那么把一个物件的产品要展示到方方面面,就要运用到360度旋转图片特效,因为上次有朋友叫我帮她弄这样一个效果,然后结合网上的资源,就小试牛刀了,觉得还挺好玩的,效果还是可以看的吧. 首先呢,需要在HTML文档中引入3deye.min.js文件和jq.js,这些可以在网上下载到免费的,另外,要展示到方方面面的,就要做这件物品的各个角度的图片,我这里是36张图片,每10度一张图片,好了,我就贴出

分享几种CSS背景图片定位的方法

由于观测指标间存在相关性,将导致信息的重叠与低效,我们倾向于用少量的.尽可能多能反映原特征的新特征来替代他们,主成分分析因此产生.主成分分析可以看成是高维空间通过旋转坐标系找到最佳投影(几何上),生成新维度,其中新坐标轴每一个维度都是原维度的线性组合θ′Xθ′X(数学上),满足: 如果存在这么严重的问题,网络上应该早就有人遇到了.但实际上没有一个人提出类似的问题,并且我们使用的 jQuery 也是最新版:v1.12.4 为了避免 FineUIPro 的客户端 JavaScript 的影响,我们把

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);   

&lt;转载&gt;使CSS文字图片div元素居中方法之水平居中的几个方法

文字居中,文字垂直居中水平居中,图片居中,图片水平居中垂直居中,块元素垂直居中?当我们在做前端开发是时候关于css居中的问题是很常见的.情 况有很多种,不同的情况又有不同的解决方式.水平居中的方式解决的时候相对来说通过css比较容易设置,垂直居中相对比较棘手. 先来说一下水平居中的不同情况与不同解决方法吧. 1文本,图片等行内元素的水平居中方法呢比较简单.直接给父元素设置一个text-align:centent属性就可以实现元素的水平居中了. 2 确定宽度的块级元素水平居中怎么设置呢?设置方法也

前端技术之CSS实现图片垂直居中

前端技术之CSS实现图片垂直居中技术 maybe yes 发表于2015-03-14 18:52 原文链接 : http://blog.lmlphp.com/archives/86/The_front-end_technology_pure_CSS_to_achieve_image_vertically  来自 : LMLPHP后院 让 图片实现水平居中比较简单,只需要在父级容器中添加属性 text-align 为 center 即可.使用纯 CSS 实现图片的垂直居中,可以将图片包裹容器的 d

【javascript/css】Javascript+Css实现图片滑动浏览效果

今天用js+css来做一个能够左右滑动的图片浏览效果. 首先写一个结构,包括需要浏览的两张图,以及能够点击来滑动图片的两个按钮. 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 5 <script type="text/javascrip

css 背景图片拉伸[转]

http://www.jeasyuicn.com/css-background-image-stretching.html background-image:url(bg.png); -moz-background-size: 100% 100%; -o-background-size: 100% 100%; -webkit-background-size: 100% 100%; background-size: 100% 100%; -moz-border-image: url(bg.png)

&lt;转载&gt;CSS解决图片过大撑破DIV的方法

DIV+CSS网页内容中如果插入大于DIV层宽度显示,过大的图片将会撑破网页宽度显示从而网页严重变形,您是否遇到过?这里DIVCSS5给大家介绍几种解决图片撑破撑开网页DIV层方法. 图片撑破宽度解决方法.CSS设置div层宽度图片大于设置div宽度后撑破div固定宽度解决方法方案,隐藏图片超出撑破宽度方法. 一.防止图片撑破DIV方法一 原始处理方法是将要展示的图片进行处理.比如你的DIV宽度为500px(像素),那你上传的图片或放入网页的图片宽度就要小于500px,也就是你图片需要图片软件剪