HTML中,怎样将图片旋转90度显示

html-css024

HTML中,怎样将图片旋转90度显示,第1张

1 图片的旋转实现方式有很多,比如js实现,现在比较简单的方法是使用css3里面的;transform属性来实现,很方便的。其实这个题目很简单,在百度里面搜索一下css3旋转就看到了,里面的手册介绍的很清楚,下面是代码以及显示效果都呈现出来;

2 下面是写的一个实例代码,代码可以直接运行。代码的解释有备注哦;总共代码呢其实没有几行,主要就是 transform属性的应用 代码中的90deg就是90度的意思

<!DOCTYPEhtml>

<html>

<head>

<style>

body{margin:0pxpadding:0px}

/*{transform就是专门为img图片设置的旋转*/

#img1{transform:rotate(90deg)border:1pxsolidred}

</style>

</head>

<body>

<imgid="img1"src="38.png"/>/*页面中显示的图片*/

</body>

</html>

3代码在浏览器的运行效果图:

旋转index文件代码:

3D旋转相册

*{

padding:0

margin:0

}

body,

html{

height:100%

}

/*背景图片在这里设置*/

body{

background-image:url("images/beijing.jpg")

background-size:100%100%

}

#box{

width:280px

height:400px

position:fixed

left:0

right:0

top:0

bottom:0

margin:auto

transform-style:preserve-3d

transform:rotateX(0deg)rotateY(0deg)

animation:go45slinearinfinite

}

#boximg{

width:280px

height:400px

position:absolute

left:0

top:0

}

#boximg:nth-child(1){

transform:rotateY(0deg)translateZ(650px)

}

#boximg:nth-child(2){

transform:rotateY(36deg)translateZ(650px)

}

#boximg:nth-child(3){

transform:rotateY(72deg)translateZ(650px)

}

#boximg:nth-child(4){

transform:rotateY(108deg)translateZ(650px)

}

#boximg:nth-child(5){

transform:rotateY(144deg)translateZ(650px)

}

#boximg:nth-child(6){

transform:rotateY(180deg)translateZ(650px)

}

#boximg:nth-child(7){

transform:rotateY(216deg)translateZ(650px)

}

#boximg:nth-child(8){

transform:rotateY(252deg)translateZ(650px)

}

#boximg:nth-child(9){

transform:rotateY(288deg)translateZ(650px)

}

#boximg:nth-child(10){

transform:rotateY(324deg)translateZ(650px)

}

@keyframesgo{

0%{

transform:rotateX(0deg)rotateY(0deg)

}

25%{

transform:rotateX(20deg)rotateY(180deg)

}

50%{

transform:rotateX(0deg)rotateY(360deg)

}

75%{

transform:rotateX(-20deg)rotateY(540deg)

}

100%{

transform:rotateX(0deg)rotateY(720deg)

}

}

images/1.jpg

images/2.jpg

images/3.jpg

images/4.jpg

images/5.jpg

images/6.jpg

images/7.jpg

images/8.jpg

images/9.jpg

images/10.jpg

你可以把图片放在一个div里面,然后给这个div加上一个transform:rotate(30deg)的样式。这个样式可以让div旋转,里面的图片自然也就跟着旋转了。30是旋转角度,你可以随便改。