引导左图右文本

在现代网站设计中，左图右文本的布局非常常见，可以吸引用户的注意力，同时也有利于传达信息。为了实现这种布局，我们需要使用HTML和CSS，以及一些JavaScript。

HTML布局

<div class="container">
  <img src="image.jpg" alt="图像">
  <div class="text">
    <h2>标题</h2>
    <p>文本内容</p>
  </div>
</div>

在这个HTML布局中，我们使用<div>元素来包含图像和文本。图像使用<img>元素来嵌入，文本用一个<div>元素包裹。文本部分包含一个标题和一个段落。

CSS样式

.container {
  display: flex;
  align-items: center;
  justify-content: center;
}

img {
  width: 50%;
  height: auto;
}

.text {
  width: 50%;
  padding: 20px;
}

在CSS中，我们使用display: flex;来将图像和文本放置在同一个容器中，并用align-items: center;和justify-content: center;来使它们水平和垂直居中。图像使用width: 50%;来指定其宽度，文本使用width: 50%;来占据其余空间。文本也有一些内部填充，用于分离文本内容与容器边缘的间距。

JavaScript交互

const container = document.querySelector('.container');
const img = document.querySelector('img');
const text = document.querySelector('.text');

container.addEventListener('mousemove', (e) => {
  let x = -((window.innerWidth / 2 - e.pageX) / 15);
  let y = ((window.innerHeight / 2 - e.pageY) / 15);
  img.style.transform = `rotateY(${x}deg) rotateX(${y}deg)`;
});

container.addEventListener('mouseenter', (e) => {
  text.style.transform = 'translateZ(150px)';
});

container.addEventListener('mouseleave', (e) => {
  img.style.transform = 'rotateY(0) rotateX(0)';
  text.style.transform = 'translateZ(0)';
});

对于添加一些动态效果，我们可以使用JavaScript。在这个示例中，我们使用鼠标事件来旋转图像，并让文本稍微偏移一些以增加深度感。当鼠标进入容器时，文本向前移动，当鼠标离开时，图像和文本都返回原始位置。

以上就是引导左图右文本的完整介绍，并附带了HTML、CSS和JavaScript的代码片段。