Question

我在html中有一个2d图像，我希望将其设置为带有CSS的3d样式，但我一直在搜索互联网，但没有运气。要添加，我也希望徽标也旋转。图像是行星地球，我想像在导航栏中那样旋转。再次进行了研究，我得到的是旋转y，x和z，有时使用photoshop。这是我的代码：

* {
  box-sizing: border-box;
}

.index-header {
  width: 100%;
  height: 100px;
  background-color: #000;
}

.index-header .index-logo {
  float: left;
  height: 100px;
  width: 100px;
  perspective: 360px;
  transform: scale3d(360deg);
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8"  />
    <meta name="viewport"  content="width=device-width, initial-scale=1.0"  />
    <link rel="stylesheet"  href="style.css"  />
    <title>Document</title>
  </head>
  <body>
    <header class="index-header">
      <img src="logo/logo.png"  alt=""  class="index-logo"  />
    </header>
  </body>
  </html>

Answer 1

你的意思是这样吗？

@import url(https://fonts.googleapis.com/css?family=Sigmar+One);
body {
  margin: 0;
  text-align: center;
  background: #F4F1F8;
}
h1 {
  font-family: 'Sigmar One', cursive;
  color: #FFC84D;
}
h4 {
  font-family: monospace;
}
section {
  display: block;
  width: 660px;
  margin: 0 auto;
}
div {
  height: 120px;
  width: 220px;  
}
.container {
  position: relative;
  display: inline-block;
  height: 120px;
  margin: 0 2em 2em 0;
  opacity: .7;
  border-radius: 5px;
  background: #E4E1E4;
  -webkit-perspective: 400px;
  perspective: 400px;
  -webkit-transform-style: preserve-3d; 
  transform-style: preserve-3d;
}
.transform {
  position: absolute;
  bottom: 0;
  background: rgba(65, 245, 254, .5);
  border-radius: 5px;
  -webkit-animation: notransform 5s infinite;
  animation: notransform 5s infinite;
}
.translate3d {
  -webkit-transform: translate3d(20px,20px,20px);
  -ms-transform: translate3d(20px,20px,20px);
  transform: translate3d(20px,20px,20px);
}
.scale3d {
  -webkit-transform: scale3d(0,0,1);
  -ms-transform: scale3d(0,0,1);
  transform: scale3d(0,0,1);
  -webkit-animation-delay: .5s;
  animation-delay: .5s;
}
.rotate3d {
  -webkit-transform: rotate3d(1, .5, 1, -30deg);
  -ms-transform: rotate3d(1, .5, 1, -30deg);
  transform: rotate3d(1, .5, 1, -30deg);
  -webkit-animation-delay: 1s;
  animation-delay: 1s;
  
  }
.rotateX {
  -webkit-transform: rotateX(180deg);
 -ms-transform: rotateX(180deg);
  transform: rotateX(180deg);
   -webkit-animation-delay: 1.5s;
  animation-delay: 1.5s;
}
.rotateY {
  -webkit-transform: rotateY(180deg);
  -ms-transform: rotateY(180deg);
  transform: rotateY(180deg);
  -webkit-animation-delay: 2s;
  animation-delay: 2s;
}
.rotateZ {
  -webkit-transform: rotateZ(180deg);
  -ms-transform: rotateZ(180deg);
  transform: rotateZ(180deg);
  -webkit-animation-delay: 2.5s;
  animation-delay: 2.5s;
}
@-webkit-keyframes notransform {
  50% {transform: none;}
}
@keyframes notransform {
  50% {transform: none;}
}

<h1>CSS3 3D Transform examples</h1>
<section>
<div class="container">
  <div class="transform translate3d"><h4>translate3d(20px,20px,20px)</h4></div>
  </div>
  
<div class="container">
  <div class="transform scale3d"><h4>scale3d(0,0,1)</h4></div>
  </div>
  
<div class="container">
  <div class="transform  rotate3d"><h4>rotate3d(1, .5, 1, -30deg)</h4></div>
  </div>

<div class="container">
  <div class="transform  rotateX"><h4>rotateX(180deg)</h4></div>
  </div>
  
  <div class="container">
  <div class="transform  rotateY"><h4>rotateY(180deg)</h4></div>
  </div>
  
  <div class="container">
  <div class="transform  rotateZ"><h4>rotateZ(180deg)</h4></div>
  </div>
</section>

将2d图像转换为3d图像

1 个答案: