正文
css3图片3d上下翻转 css3的3d图片代码
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
html5如何让图片3d旋转？
图片旋转可以用CSS3中的动画效果来做，CSS3中，允许使用 3D 转换来对元素进行格式化。
示例代码如下：
style
*{margin:0;padding:0;}/*简单可以自定义，参照上面*/
body{font:14px/1.5 "\5FAE\8F6F\96C5\9ED1","\5B8B\4F53", sans-serif, Arial, System;background-color:#FFF;}
#imgg{animation:imgg 1s linear 0s infinite;}
@keyframes imgg{0% {transform:rotateY(0deg);}25%{transform:rotateY(90deg);}50%{transform:rotateY(180deg);}75%{transform:rotateY(270deg);}100% {transform:rotateY(360deg);}}
/style
div id="demo"
img src="图片地址" alt="" width="100" height="100" id="imgg"
/div
相关问答
Q1: 如何用CSS翻转背景图片
1.css3的新增属性 transform: rotateY(360deg);水平翻转360°，可以设置当鼠标移上去的时候进行水平翻转，或者使用@keyframes规则动画，一直翻转。
Q2: 怎样用CSS实现图片翻转
以实现一张图片双面翻转为例：
方法一：
1、实现CSS样式的方法代码如下。
2、实现前端布局的方法代码如下。
3、实现图片翻转CSS样式代码如下。
方法二：
1、实现正反面效果的HTML的方法代码如下。
2、实现CSS样式的方法代码。
3、然后实现竖向翻转的方法代码如下。
Q3: 怎样用HTML5、CSS3和JavaScript创建一个3D效果的图片切换翻转效果？
/*以谷歌浏览器为例，实现360度翻转，命名个方法run翻转，调用run，5s周期内实现翻转*/
{
-webkit-animation: run 10s linear infinite; /*添加动画，动画周期为5s，无限循环*/
}
@-webkit-keyframes run {
0% { /*动画初始状态时元素旋转角度*/
-webkit-transform: rotateX(0deg) rotateY(0deg)
}
100% { /*动画结束状态时元素旋转角度*/
-webkit-transform:rotateX(360deg) rotateY(360deg)
}
}
Q4: css3 如何让一个图片不断翻转
/* css3 让一个图片不断翻转示例代码 */
#gavinPlay{
/* background:color url x y repeat 图片来自百度图片，按需要更换 */
background:red url(";fm=80") center no-repeat;
/* background-size:auto auto || cover 代表以宽或高填满元素背景 */
background-size:cover;
/* 随便设置宽高值，测试 */
width:200px;
height:200px;
/* 设置默认样式，开启3d硬件加速 */
-webkit-transform:translate3d(0,0,0);
-moz-transform:translate3d(0,0,0);
transform:translate3d(0,0,0);
/* 设置动画，animation:动画名称 动画播放时长单位秒或微秒 动画播放的速度曲线linear为匀速 动画播放次数infinite为循环播放; */
-webkit-animation:play 3s linear infinite;
-moz-animation:play 3s linear infinite;
animation:play 3s linear infinite;
}
@-webkit-keyframes play{
0% {
/*
水平翻转
*/
-webkit-transform:rotateY(0deg);
/*
垂直翻转
-webkit-transform:rotateX(0deg);
顺时针旋转
-webkit-transform:rotate(0deg);
逆时针旋转
-webkit-transform:rotate(0deg);
*/
}
100% {
/* 水平翻转 */
-webkit-transform:rotateY(360deg);
/* 垂直翻转
-webkit-transform:rotateX(360deg);
顺时针旋转
-webkit-transform:rotate(360deg);
逆时针旋转
-webkit-transform:rotate(-360deg);
*/
}
}
@-moz-keyframes play{
0% {
-moz-transform:rotateY(0deg);
/*
-moz-transform:rotateX(0deg);
-moz-transform:rotate(0deg);
-moz-transform:rotate(0deg);
*/
}
100% {
-moz-transform:rotateY(360deg);
/*
-moz-transform:rotateX(360deg);
-moz-transform:rotate(360deg);
-moz-transform:rotate(-360deg);
*/
}
}
@keyframes play{
0% {
transform:rotateY(0deg);
/*
transform:rotateX(0deg);
transform:rotate(0deg);
transform:rotate(0deg);
*/
}
100% {
transform:rotateY(360deg);
/*
transform:rotateX(360deg);
transform:rotate(360deg);
transform:rotate(-360deg);
*/
}
}
!-- html 布局代码 --
div id="gavinPlay"/div
css3图片3d上下翻转的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于css3的3d图片代码、css3图片3d上下翻转的信息别忘了在本站进行查找喔。
